css3怎么在input搜索框里添加图片

发布网友发布时间：2022-04-25 09:10

我来回答

共4个回答

热心网友时间：2022-04-20 19:56

1、新建html文档。

2、书写hmtl代码。

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

</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、查看效果。

热心网友时间：2022-04-20 21:14

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

1、首先，打开html编辑器，新建html文件，例如：index.html。

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

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

热心网友时间：2022-04-20 22:49

可以设置input的position为relative

然后设置input的伪元素::after,并设置position为absolute，在给他加上宽高、background，通过调整left、top等参数将图片放到正确的位置：

input {
    position: relative;
    height: 30px;
}
input:after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    background: url('some/image/url');
    right: 0;
    top: 50%;
    translate: transform(0, -50%);
}

热心网友时间：2022-04-21 00:40

background-image: url(图片地址，不加引号);
background-repeat: no-repeat; //背景图去重
background-position：90%; //背景图位置