Question

在一次练习中，我被要求输入与图像中显示的样式完全相同的输入。

我遇到困难，有人可以帮助我吗？我想获得完全相同的设计，但是我很难将其转换为输入，并将所有内容都放置在正确的位置。

#grupo_1 {
	top: 84px;
	left: 1381px;
	width: 219px;
	height: 32px;
}

#ret_ngulo_1 {
	opacity:0.10000000149012;
	top: 0px;
	left: 0px;
	width: 219px;
	height: 32px;
	-ms-border-radius: 16px;
	-o-border-radius: 16px;
	-moz-border-radius: 16px;
	-webkit-border-radius: 16px;
	border-radius: 16px;
	background:rgba(73,129,194,255);
}

#search_input {
	top: 7px;
	left: 14px;
	width: 78px;
	height: 18px;
}

#search___ {
	top: -3px;
	left: 26px;
	width: 57px;
	height: 21px;
	font-family: Noto Sans;
	font-size: 13px;
	text-align: left;
	color:#4d4f5c;
}

#icon_search {
	top: 1px;
	left: 0px;
	width: 16px;
	height: 16px;
}

#icon_search_ek1 {
	top: 0px;
	left: 0px;
	width: 16px;
	height: 16px;
}

<div id="grupo_1"  >
	<div id="ret_ngulo_1"  ></div>
	<div id="search_input"  >
		<div id="search___" >
			Search...
		</div>
		<div id="icon_search"  >
			<img src="https://i.imgur.com/LVbiP6D.png" id="icon_search_ek1" />
		</div>
	</div>
</div>

Answer 1

您将要使用display和position。首先，您需要将position: absolute添加到#ret_ngulo_1以便将Search移动到栏中。之后，您需要将display: inline-block添加到#search___和#icon_search中，以及交换它们在HTML中的顺序。您可能还想玩margin，尽管在此示例中我没有这样做。

#grupo_1 {
  top: 84px;
  left: 1381px;
  width: 219px;
  height: 32px;
}

#ret_ngulo_1 {
  opacity: 0.10000000149012;
  top: 0px;
  left: 0px;
  width: 219px;
  height: 32px;
  -ms-border-radius: 16px;
  -o-border-radius: 16px;
  -moz-border-radius: 16px;
  -webkit-border-radius: 16px;
  border-radius: 16px;
  background: rgba(73, 129, 194, 255);
  position: absolute;
}

#search_input {
  top: 7px;
  left: 14px;
  width: 78px;
  height: 18px;
}

#search___ {
  top: -3px;
  left: 26px;
  width: 57px;
  height: 21px;
  font-family: Noto Sans;
  font-size: 13px;
  text-align: left;
  color: #4d4f5c;
  display: inline-block;
}

#icon_search {
  top: 1px;
  left: 0px;
  width: 16px;
  height: 16px;
  display: inline-block;
}

#icon_search_ek1 {
  top: 0px;
  left: 0px;
  width: 16px;
  height: 16px;
}

<div id="grupo_1">
  <div id="ret_ngulo_1"></div>
  <div id="search_input">
    <div id="icon_search">
      <img src="https://i.imgur.com/LVbiP6D.png" id="icon_search_ek1" />
    </div>
    <div id="search___">
      Search...
    </div>
  </div>
</div>

请注意，您也可以直接使用<input>标记，这将使您可以将图像设置为背景。

还请注意，top和left仅适用于已定位的元素（具有设置了position的祖先的元素），并且赢得了较高的px单位在小型设备上渲染效果不佳。

Answer 2

因此，您总是可以尝试一下这种略有不同的方法！

请参阅：JSFiddle

它需要一个少的包装类，并且不使用您列出的Imgur图像，而是使用一个名为Font Awesome的icon set。您可以了解“真棒字体here”。

这是我的示例，以及如何引用icon set：

.search_box {
   border-radius: 15px;
   background-color: #edf3f9;
   opacity: 0.8;
   border: none;
   height: 20px;
   line-height: 20px;
   color: black;
   text-indent: 40px;
   width: 200px;
   position: relative;
}

.search_box::placeholder{   
   opacity: 0.9;
   color: black;
}

.search_box::-webkit-input-placeholder{   
   opacity: 0.9;
   color: black;
}

.search_box:-ms-input-placeholder{
   opacity: 0.9;
   color: black;
}

#search_icon {
  position: relative;
  z-index: 99;
  left: 30px;
   opacity: 0.8;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div>
 <i class="fa fa-search" id="search_icon"></i>
 <input type="text" class="search_box" placeholder="Search..."/> 
</div>

基本上，我所有的代码是：

列出Font Awesome的图标集作为外部参考，您可以查看如何进行here
有一个包含该图标的标签，该图标被类引用，您可以看到所有Font Awesome个图标here
创建一个input标记作为您的textbox
使用border-radius和opacity相应地设置样式
确保<i>标签的z-index比textbox高，使其位于顶部
确保textbox和<i>标记具有position:relative，以使它们上方的元素不会受到影响
进行一些基本对齐，以使搜索图标位于搜索框中的正确位置

祝你好运！即使您不执行此操作，也希望它能提供很多信息：）

Answer 3

/* Reset */
* {
  box-sizing: border-box;
}

/* For demo */
body {
  padding: 20px;
}

/* Input */
.input {
  position: relative;
  width: 300px;
  height: 40px;
  font-size: 14px;
  padding: 0 15px;
  border: 2px solid #f1f1f1;
  border-radius: 20px;
  background: #f1f1f1;
  transition: all .15s ease-in-out;
}

.input:focus {
  outline: none;
  border-color: #256dd3;
}

.input--search {
  padding-left: 36px;
  background-image: url(https://i.imgur.com/LVbiP6D.png);
  background-repeat: no-repeat;
  background-position: 12px center;
}

<input class="input input--search" type="search" placeholder="Search...">

很容易...

https://codepen.io/seanstopnik/pen/b7d2731bc0789d676a65fa08dc92e570

如何设置此HTML输入/ div字段的样式？

3 个答案: