输入类型文本中的选项卡

Question

我需要在图片上创建搜索表单，但我不知道如何在下拉列表中添加内容。目前我有这样的代码

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

Answer 1

你可以这样做，但你需要按照你想要的方式设计它。

我添加了<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>

Answer 2

只需在样式中添加sudo元素中的图像（: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>

Answer 3

此链接可以帮助您search-bar-dropdown

Answer 4

尝试以下示例

＆＃13;

＆＃13;

::-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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;