Question

html和css制作一个搜索框，要内容与搜索图标结合，该怎么做？

还有一个下拉框，最好给具体代码





Answer 1

1. 先画一个图标“搜索”的图片

2. 写HTML的标签代码

3. 后期在用CSS去美化搭配颜色

4. HTML:<input type="text" value="找课程"  class="" name="" id="">

5. 有需要用到javascript的就用javascript代码

6. CSS美化要自己去定义“长度”+“高度”+“背景”+“字体颜色，字体大小”;

7. 下拉框原理一样

8. <select>

9. <option value="iwen" selected id="iwem">iwem<option>

10. </select>

Answer 2

<style type="text/css">
.input-box{position: relative;width: 200px;height: 35px;}
.input-box input{width: 200px;height: 35px;padding-left: 10px;padding-right: 32px;}
.input-box button{width:32px;height: 32px;background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAAAXNSR0IArs4c6QAAAhNJREFUOBGllM1V40AMx6WB3JcTlMAtbAdJBUADYB6w1yzbAKEC4Aw8/KAAoALSAeFGCbu3vQcs/pJmBjvmM8x79oxH0s8ajSSmN4ZsF2vEVZeIe1BZiWpjIhlhPebTi5u49+rE07uyWwAi59hPsGmV9I2f8BaflJjbI9S3ZGdjCOgd9hR+TyIHJNynCS/Yo2vdU5nr3MFmv85I6+yxQZmjkhzzycXvpDQ9S1H8oE41hMcDk0m1x6eXR3U9A8fjq6dEFa/zWXldV3prbfcQ5Mrl/LMelhiKqnQhPP0kVPVdV46jrd5LHsH+StzVuL13/GwxvZiEYYq5s1whIKVwURhCnzq+m728uSz/Z9vEghhg6rlaGPk8yzvaZpaCid3jRxrPgjSbZCsaUh+NPE6bM8+M88cBsLin8x9WWrJpz9k2sqAREPiRa1Y9n2d5R9vMMnBwj5lXraK+yDUb2JqZRBY+Qkxyr30r0y+S3QYJgDqoFVe8vFA4jgf1JP/oF1F3gHBiJIZbGdhq3LqWyuVKdjYP3wuLylSHQoU+gURg+kcT+utIf+f00M9mh0Nei1wTo7FP5jRURJ2nLtpoj5jX8LViniqUaBHPA1prH5VoP2iAISTvdNqUXpJd99tDezKOr5525BbyZTwZ3gIngMVPa9/KNFan5rymFG6/flEIzVILnkDfnZvw6td3eQ17hcvuxh/dfAbrGtbYTbXLRQAAAABJRU5ErkJggg==);
background-repeat:no-repeat ;outline: none;border: none;
position: absolute;top: 20%;right: 0%;
}
</style>
<div class="input-box">
<input type="text" name="" value="" placeholder="看什么看"/>
<button></button>

Answer 3

简单结构，样式自己去写
搜索框
《DIV》《Input type=text》《i》你的放大镜的图标《/i》《DIV》

下拉
<div>默认值</div>

《ul》

<li><i>你的图标</i>选项一</li>

<li><i>你的图标</i>选项2</li>
《/ul》

**或者你可以用list-style的项目号来做。