标签里面的输入类型文本

我需要创建像图片上的搜索表单，但我不知道如何把下拉列表里面的标签。目前，我有这样的代码标签里面的输入类型文本

enter image description here

<form action="" class="search-form"> 
    <input type="text" class="form-control empty" id="iconified" placeholder="&#xF002;"/> 
</form>

来源

2016-09-23 yyyyy

这种形式需要额外的选择字段，然后你可以用风格定位它。 – aavrug

“所有类别”标记在哪里？这是否在表格之外？ – Curt

我不认为他有它，我认为他希望它看起来像那样 – RasmusGlenvig

在须藤元素的样式（:after, :before）只需添加图像。

#iconified { 
 
    padding: 10px; 
 
    width: 56%; 
 
    border-radius: 7px; 
 
    border: 2px solid #DDDDDD; 
 
    outline: none; 
 
} 
 
input[type="submit"] { 
 
    position: absolute; 
 
    left: 308px; 
 
    top: 16px; 
 
} 
 
select { 
 
    position: absolute; 
 
    left: 225px; 
 
    top: 17px; 
 
    background: none; 
 
    border: 1px solid #DDD; 
 
    border-top: 0; 
 
    border-bottom: 0; 
 
    outline: none; 
 
}

<form action="" class="search-form"> 
 
    <input type="text" class="form-control empty" id="iconified" placeholder="search"/> 
 
    <select name="" id=""> 
 
    <option value="">Option 1</option> 
 
    <option value="">Option 2</option> 
 
    <option value="">Option 3</option> 
 
    <option value="">Option 4</option> 
 
    </select> 
 
    <input type="submit" value="Search"> 
 
</form>

来源

2016-09-23 11:00:52 aavrug

谢谢，它的工作 – yyyyy

你可以不喜欢这样，但你会需要它的样式，你wan't的方式。

我加了一个<select>标签和<input type="submit" value="Search">按钮

<form action="" class="search-form"> 
 
    <input type="text" class="form-control empty" id="iconified" placeholder="&#xF002;"/> 
 
    <select name="" id=""> 
 
     <option value="">Option 1</option> 
 
     <option value="">Option 2</option> 
 
     <option value="">Option 3</option> 
 
     <option value="">Option 4</option> 
 
    </select> 
 
    <input type="submit" value="Search"> 
 
</form>

来源

2016-09-23 10:18:12 RasmusGlenvig

此链接将帮助您search-bar-dropdown

来源

2016-09-23 10:19:52

试试下面的示例

::-webkit-input-placeholder { 
 
    text-align: left; 
 
    padding: 35% 35% 0 15%; 
 
} 
 

 
:-moz-placeholder { /* Firefox 18- */ 
 
    text-align: left; 
 
} 
 

 
::-moz-placeholder { /* Firefox 19+ */ 
 
    text-align: left; 
 
} 
 

 
:-ms-input-placeholder { 
 
    text-align: center; 
 
} 
 

 
#iconified { 
 
    /*padding: 10px;*/ 
 
    width: 24%; 
 
    border-radius: 7px; 
 
    border: 2px solid #DDDDDD; 
 
    outline: none; 
 
} 
 

 
input[type = "text"] { 
 
    background: url("http://png.findicons.com/files/icons/1389/g5_system/32/toolbar_find.png") top left no-repeat; 
 
    background-size: 10%; 
 
    background-position: 4px 8px; 
 
    height: 30px; 
 
    padding-right: 30px; 
 
} 
 

 
input[type="submit"] { 
 
    position: absolute; 
 
    left: 340px; 
 
    top: 16px; 
 
    background: url(https://cdn2.iconfinder.com/data/icons/arrows-and-universal-actions-icon-set/256/arrow_right_circle-32.png) no-repeat scroll 0 0 transparent; 
 
    color: #000000; 
 
    cursor: pointer; 
 
    font-weight: bold; 
 
    /* height: 20px; */ 
 
    padding-bottom: 2px; 
 
    width: 82px; 
 
    background-size: 20px 19px; 
 
    border: none; 
 
} 
 

 
select { 
 
    position: absolute; 
 
    left: 225px; 
 
    top: 17px; 
 
    background: none; 
 
    border: 1px solid #DDD; 
 
    border-top: 0; 
 
    border-bottom: 0; 
 
    outline: none; 
 
    color: #DDDDDD; 
 
}

<form action="" class="search-form"> 
 
     <input type="text" class="form-control empty" id="iconified" placeholder="Search" /> 
 
     <select name="" id="slctOption"> 
 
      <option selected="selected" value="0">All Categories</option> 
 
      <option value="1">Option 1</option> 
 
      <option value="2">Option 2</option> 
 
      <option value="3">Option 3</option> 
 
      <option value="4">Option 4</option> 
 
     </select> 
 
     <input type="submit" value=""> 
 
    </form>

来源

2016-09-24 06:04:56

标签里面的输入类型文本

回答

相关问题