html - 搜索栏不接受关闭按钮
问题描述
我有这个搜索栏,但无论我做什么,我似乎都无法添加小灰色/黑色“x”来清除搜索栏中的文本。希望对此有所帮助。非常感谢!
input[type=search] {
width: 130px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 14px;
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
position: absolute;
right: 10px;
top: 3px;
}
input[type=search]:focus {
width: 25%;
}
<input type="search" id="myInput" placeholder="Search..">
解决方案
我在使用带有“x”的引导程序时遇到了问题。但是,我使用了这个 CSS 并且效果很好!
input[type=search] {
width: 130px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 14px;
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
position: absolute;
right: 10px;
top: 3px;
}
input[type=search]:focus {
width: 25%;
}
<input type="search" id="myInput" placeholder="Search..">
input[type="search"] {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
-webkit-appearance: searchfield;
}
input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: searchfield-cancel-button;
}
推荐阅读
- excel - 缓慢或无响应的 VBA excel 宏,用于将数据从 word 复制到 Outlook 正文以通过循环发送出去
- javascript - 在 Slate.js editor.apply(operation) 中没有正确应用“split_node”操作
- python - 变量选择涉及数字、高基数、低基数特征的混合
- javascript - 如何将数据传递给 props.children?
- flutter - 如何编写当且仅检测到更改时运行的颤振函数?
- python-3.x - 如何执行刚刚安装的最新版本的python?
- java - JavaFX StringProperty.isEmpty
- c# - 如何更新数据表中的特定列?
- python - Tensorflow 2:序列化和解码时的形状不匹配
- soap - 如何在生成的 wsdl 中指定模式位置