搜索框里面加图片素材-怎么给浏览器搜索下拉框添加背景图片

1、新建html文档。

2、书写hmtl代码。

<div class="container">

<div id="search">

<label for="search">点击查看效果(<a href="#" target="_blank">11111111111</a>):</label>

<input type="text" name="q">

<input class="button" type="submit" value="Search">

</div>

</div>

3、书写css代码。

<style>

body { background-color: #f1f1f1; margin: 0; }

body,  input,  button { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }

.container { margin: 30px auto 40px auto; width: 800px; text-align: center; }

a { color: #4183c4; text-decoration: none; font-weight: bold; }

a:hover { text-decoration: underline; }

h3 { color: #666; }

ul { list-style: none; padding: 25px 0; }

li { display: inline; margin: 10px 50px 10px 0px; }

input[type=text],  input[type=password] { font-size: 13px; min-height: 32px; margin: 0;

padding: 7px 8px; outline: none; color: #333; background-color: #fff; background-repeat:

no-repeat; background-position: right center; border: 1px solid #ccc; border-radius: 3px;

box-shadow: inset 0 1px 2px rgba(0,0,0,0.075); -moz-box-sizing: border-box; box-sizing:

border-box; transition: all 0.15s ease-in; -webkit-transition: all 0.15s ease-in 0; vertical-align: middle; }

button { position: relative; display: inline-block; margin: 0; padding: 8px 15px; font-size:

13px; font-weight: bold; color: #333; text-shadow: 0 1px 0 rgba(255,255,255,0.9); white

space: nowrap; background-color: #eaeaea; background-image: -moz-linear

gradient(#fafafa, #eaeaea); background-image: -webkit-linear-gradient(#fafafa, #eaeaea);

background-image: linear-gradient(#fafafa, #eaeaea); background-repeat: repeat-x;

border-radius: 3px; border: 1px solid #ddd; border-bottom-color: #c5c5c5; box-shadow:

01px 3px rgba(0,0,0,.05); vertical-align: middle; cursor: pointer; -moz-box-sizing: border-box;

box-sizing: border-box; -webkit-touch-callout: none; -webkit-user-select: none; -khtml

user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;

webkit-appearance: none; }

.button:hover,  .button:active { background-position: 0 -15px; border-color: #ccc #ccc

#b5b5b5; }

.button:active { background-color: #dadada; border-color: #b5b5b5; background-image:

none; box-shadow: inset 0 3px 5px rgba(0,0,0,.15); }

.button:focus,  input[type=text]:focus,  input[type=password]:focus { outline: none; border

color: #51a7e8; box-shadow: inset 0 1px 2px rgba(0,0,0,.075), 0 0 5px rgba(81,167,232,.5); }

label[for=search] { display: block; text-align: left; }

#search label { font-weight: 200; padding: 5px 0; }

#search input[type=text] { font-size: 18px; width: 705px; }

#search .button { padding: 10px; width: 90px; }

</style>

4、代码整体结构。

5、查看效果。

这要看你怎么写的了;如全局定位的body为根节点a为搜索框,b为下拉展示

a{

width:300px;

height:50px;

margin-top:100px;

margin-left:100px;

}

b{

width:100px;

background:#fff;(背景颜色控制,也可以为背景图片)

position:absolute;

z-index:3;(图层控制)

top:150px;(top为搜索框距顶部(body的高度)高度+搜索框高度)

left:100px;(left为搜索框距左边的距离)

}

不管怎么写就看你以哪个为根节点了

需要准备的材料分别有:电脑、浏览器、html编辑器。

1、首先,打开html编辑器,新建html文件,例如:。

2、在中的<style>标签中,输入css代码:img {width: 15px; position: absolute;left: 150px; top: 17px;}。

3、浏览器运行页面,此时成功在input搜索框中添加了放大镜图片。