Css 如何在<;上显示关闭图标;输入>;活动状态
我有一个带有搜索图标的输入字段。按下/聚焦输入字段时,我希望在输入框上显示一个关闭图标,如下图所示Css 如何在<;上显示关闭图标;输入>;活动状态,css,jquery-mobile,Css,Jquery Mobile,我有一个带有搜索图标的输入字段。按下/聚焦输入字段时,我希望在输入框上显示一个关闭图标,如下图所示 #搜索控件{ 高度:68px; 填充物:5px; } #搜索控件input.ui-input-text{ 高度:26px; 背景:url('../img/search icon.png')99.5%中心无重复; 背景尺寸:16px 14px; 边框:1px实心#999; -moz边界半径:2px; 边界半径:2px; -moz盒阴影:插入0px 5px 10px-5px#BBB; -网络工
#搜索控件{
高度:68px;
填充物:5px;
}
#搜索控件input.ui-input-text{
高度:26px;
背景:url('../img/search icon.png')99.5%中心无重复;
背景尺寸:16px 14px;
边框:1px实心#999;
-moz边界半径:2px;
边界半径:2px;
-moz盒阴影:插入0px 5px 10px-5px#BBB;
-网络工具包盒阴影:插入0px 5px 10px-5px#BBB;
盒影:插入0px 0px 5px 10px-5px#BBB;
填充:6px 5px 0 5px;
保证金:0.5px 0;
字体大小:15px;
线高:15px;
}
#搜索控件input.ui-input-text.ui-focus{
边框:1px实心#9E0249;
边界半径:2px;
-moz边界半径:2px;
-webkit边界半径:2px;
盒影:无;
莫兹盒阴影:无;
-webkit盒阴影:无;
背景:url('../img/search active icon.png')100%中心不重复;
}
试试这样的方法-
HTML
试图用img替换“x”。没有正确显示感谢Zoltan。我试着用那个“x”符号作为一个清晰的按钮。你知道怎么做吗。我正在尝试类似的东西。我换成了。仍然无法让它工作您必须使用JS-将一个
单击/点击侦听器连接到您的按钮,当它发生时,清除输入是唯一的选项吗?有没有任何方法可以利用jquery手机的功能,比如“删除”按钮..你知道。。
<div id="search-controls">
<input type="text" class="search-box in-acvtive" placeholder="e.g. restaurant name, cuisine" />
</div>
#search-controls {
height: 68px;
padding: 5px;
}
#search-controls input.ui-input-text {
height: 26px;
background: url('../img/search-icon.png') 99.5% center no-repeat;
background-size: 16px 14px;
border: 1px solid #999;
-moz-border-radius: 2px;
border-radius: 2px;
-moz-box-shadow: inset 0px 5px 10px -5px #BBB;
-webkit-box-shadow: inset 0px 5px 10px -5px #BBB;
box-shadow: inset 0px 0px 5px 10px -5px #BBB;
padding: 6px 5px 0 5px;
margin: 0 0 5px 0;
font-size: 15px;
line-height: 15px;
}
#search-controls input.ui-input-text.ui-focus {
border: 1px solid #9E0249;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
box-shadow: none;
moz-box-shadow: none;
-webkit-box-shadow: none;
background: url('../img/search-active-icon.png') 100% center no-repeat;
}
<div id="header" class="search" data-role="header" data-position="fixed">
<div id="search-controls">
<input type="text" class="search-box" placeholder="e.g. restaurant name, cuisine" />
<span> x </span>
</div><!-- /search-controls -->
</div>