文本框（input）添加提示图标与修饰效果

最新推荐文章于 2023-02-09 14:14:30 发布

原创最新推荐文章于 2023-02-09 14:14:30 发布 · 1.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#CSS #HTML #XHTML

CSS 专栏收录该内容

35 篇文章

订阅专栏

本文介绍如何使用CSS为文本框添加图标和柔和边框，通过定义不同类名实现多样化设计，适用于前端开发人员。

转载自：
http://www.codebit.cn/pub/html/xhtml_css/tip/input_background_image/

为你的文本框加一个说明用途的小图标

input.txtInput {
background: fff;
background-repeat: no-repeat;
background-position: 2px center;
border:1px solid 999;
padding:2px 2px 2px 20px;
}
input.searchInput {background-image: url(search.gif);}
input.commentInput {background-image: url(comments.gif);}

上面的代码中 input.txtInput 定义了文本框中有小图标的通用样式，其中 padding 的第四个值是定义文字内容从 20 象素处开始，原因是本文的图片是 16 象素大小，文字四周有 2 象素的边距。具体到实际应用，需要根据你的图片大小决定。

然后，我们又定义了 searchInput 和 commentInput 两个文本框样式，分别设置了2个不同的小图标。这样，我们在设置文本框的 class 时可以这样写：

<p>
<label for="keyword">搜索：</label>
<input type="text" name="keyword" id="keyword" class="txtInput searchInput" />
</p>
<p>
<label for="comment">评论：</label>
<input type="text" name="comment" id="comment" class="txtInput commentInput" />
</p>

为你的文本框加一个效果柔和的边框

input.borderInput {
background-image: url(border.gif);;
background-repeat: no-repeat;
background-position: left top;
border:1px solid d5dee9;
padding:3px;
}

上面的代码设置了一个背景图，并且左上对齐，当然，我们这个图片通常要宽一些、高一些，然后设置一个和渐变颜色近似的 border 。是的，一个效果柔和的边框实现了。

border.gif:看不太清楚^_^