折騰：

【記錄】優(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的圖標：

【后記1】

記過上線后，發(fā)現(xiàn)：

移動端，iOS或Android都顯示不出來x：

iPhone6：

Android 錐子M1L：

Mac 中的Safari 模擬iOS也不行：

但是

Mac Chrome 模擬iPhone

卻可以顯示出x：

注意到：

布局也亂了：輸入框左邊的邊距都沒了

-》發(fā)現(xiàn)相當于：

.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)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。