html在输入框添加叉叉,【部分解决】bootstrap 4中如何给输入框右边加上清除叉叉的按钮...
折騰：
【記錄】優(yōu)化繪本查詢系統(tǒng)的UI
期間，需要去給輸入框內(nèi)部的右邊加上x，可以點擊 用于清除已經(jīng)輸入的內(nèi)容
給輸入框的內(nèi)部的右邊 加上一個叉叉，用于點擊后，清除已輸入的內(nèi)容
去找了半天：
貌似只有這種是最接近的：
但不是按鈕，所以去加上，看看是否可以改為按鈕
bootstrap input box clear button
現(xiàn)在試了很多種：
html
css/* #inputClear {
width: 10px;
position: absolute;
right: 5px;
top: 0;
bottom: 0;
height: 14px;
margin: auto;
font-size: 14px;
cursor: pointer;
color: #ccc;
} */
/* input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: searchfield-cancel-button;
} */
/* .clear::-ms-clear {
display: none;
} */
都不行。
還是自己去實現(xiàn)吧。
【總結(jié)】
暫時沒有實現(xiàn)要的效果，而只是加了另外按鈕去實現(xiàn)：
代碼：
清除
查詢
效果：
后來換成：
X
查詢
效果：
不能接受，再去嘗試弄成x放輸入框里面
bootstrap input clear button
效果不錯
去試試
結(jié)果不顯示
然后去看看在線頁面為何有效果，發(fā)現(xiàn)是
glyphicon glyphicon-remove
是能顯示的：
-》我這是bootstrap 4，沒有Validation states
搜：
參考
得到如下效果：
估計是
material-icons
導(dǎo)致的
抽空改為自己的試試
然后調(diào)試發(fā)現(xiàn)：
也是字體：
.material-icons
的問題：
所以去搜：
bootstrap 4 Material Icons
或者換用別的font也可以？
* Iconic
* Octicons
發(fā)現(xiàn)這里有：
所以問題就轉(zhuǎn)化為：
【已解決】Bootstrap 4中如何引用其他字體比如Font Awesome
【總結(jié)】
最后通過：
html
查詢
加上css：.input_query_group {
padding-left: 39px;
padding-right: 39px;
/* height: 28px; */
}
#inputQuery{
/* width: 80%; */
font-size: 13px;
/* height: 28px; */
}
#submitQuery{
color: #333333;
font-size: 15px;
/* width: 50px; */
height: 38px;
background-color: var(--main_color);
}
.mr-2, .mx-2 {
margin-right: 0.75rem !important;
}
/* .exampleContainer {
padding: 50px;
} */
.form-group.position-relative input {
padding-right: 32px;
}
.form-clear {
height: 22px;
width: 22px;
/* right: 0; */
right: 22px;
align-items: center;
background: #cecece;
border-radius: 50%;
bottom: 8px;
color: rgba(0, 0, 0, .20);
cursor: pointer;
display: flex;
justify-content: center;
position: absolute;
z-index: 10;
}
/* .form-text+.form-clear {
bottom: calc(1rem + 18px);
}
.form-clear .material-icons {
font-size: 16px;
font-weight: 500;
} */
效果是：
輸入內(nèi)容后，可以輸出x：
對應(yīng)的是font awesome的圖標(biāo)：
【后記1】
記過上線后，發(fā)現(xiàn)：
移動端，iOS或Android都顯示不出來x：
iPhone6：
Android 錐子M1L：
Mac 中的Safari 模擬iOS也不行：
但是
Mac Chrome 模擬iPhone
卻可以顯示出x：
注意到：
布局也亂了：輸入框左邊的邊距都沒了
-》發(fā)現(xiàn)相當(dāng)于：
.input_query_group {
沒了：
padding-left: 39px;
不過過會調(diào)試發(fā)現(xiàn)，mac中Safari模擬iOS是可以顯示x的：
難道是緩存問題？
那就多等一段時間再去試試
然后發(fā)現(xiàn)不是：
只是微信瀏覽器的原因
Android中換成QQ瀏覽器，就可以顯示了：
所以現(xiàn)在結(jié)論是：
PC端或手機端，清除按鈕都是可以正常顯示的
-》但是微信端，不論是iOS還是Android，都會不能正常顯示，且輸入框的布局都有問題：邊距都不正常。真很無語。
總結(jié)
以上是生活随笔為你收集整理的html在输入框添加叉叉,【部分解决】bootstrap 4中如何给输入框右边加上清除叉叉的按钮...的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Symbiosis（共生）和Commen
- 下一篇： Advanced Archive Pas