CSS 将图标移动到输入字段的右侧 [英] CSS Move Icon to Right of Input Field
本文介绍了CSS 将图标移动到输入字段的右侧的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
如何将放大镜移到输入字段的右侧?
这是我的小提琴.
@import url("//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");身体 {边距:30px;}.搜索 {位置:相对;颜色:#aaa;字体大小:16px;}.搜索输入{宽度:250px;高度:32px;背景:#fcfcfc;边框:1px 实心 #aaa;边框半径:5px;box-shadow: 0 0 3px #ccc, 0 10px 15px #ebebeb inset;}.搜索输入{文本缩进:32px;}.search .fa-search {位置:绝对;顶部:10px;左:10px;}
<span class="fa fa-search"></span><input placeholder="搜索词">
解决方案
您也将 left: 10px
设置为图标.从左侧设置更多像素,或直接从右侧设置像素.
.search .fa-search {left: 230px;}
http://jsfiddle.net/xhjLyf1k/1/
设置右侧位置而不是左侧位置(以防止调整输入字段的大小):
.search {display: inline-block}/* 防止 100% 宽度 */.search .fa-search {left: auto;右:10px;}
http://jsfiddle.net/xhjLyf1k/2/
How do I move the magnifying glass to the right hand side in my input field?
Here's my Fiddle.
@import url("//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");
body {
margin: 30px;
}
.search {
position: relative;
color: #aaa;
font-size: 16px;
}
.search input {
width: 250px;
height: 32px;
background: #fcfcfc;
border: 1px solid #aaa;
border-radius: 5px;
box-shadow: 0 0 3px #ccc, 0 10px 15px #ebebeb inset;
}
.search input {
text-indent: 32px;
}
.search .fa-search {
position: absolute;
top: 10px;
left: 10px;
}
<div class="search">
<span class="fa fa-search"></span>
<input placeholder="Search term">
</div>
解决方案
You set left: 10px
to an icon too. Set there more pixels from left side, or directly pixels from right.
.search .fa-search {left: 230px;}
http://jsfiddle.net/xhjLyf1k/1/
Setting right position instead of the left one (to prevent resizing of input field):
.search {display: inline-block} /* prevent 100% width */
.search .fa-search {left: auto; right: 10px;}
http://jsfiddle.net/xhjLyf1k/2/
这篇关于CSS 将图标移动到输入字段的右侧的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文