折腾：
【记录】优化绘本查询系统的UI
期间，需要去给输入框内部的右边加上x，可以点击 用于清除已经输入的内容
给输入框的内部的右边 加上一个叉叉，用于点击后，清除已输入的内容
去找了半天：
貌似只有这种是最接近的：
但不是按钮，所以去加上，看看是否可以改为按钮
bootstrap input box clear button
现在试了很多种：
html
<!-- <span id="inputClear" class="glyphicon glyphicon-remove-circle"></span> --> <!-- <input id="inputQuery" type="search" class="form-control" placeholder="请输入要查询的绘本名称" value=""> --> <!-- <input id="inputQuery" type="search" class="clear" placeholder="请输入要查询的英文绘本名称" value=""> --> <span class="input-group-btn"> <input id="inputQuery" type="search" class="form-control" placeholder="请输入要查询的绘本名称" value=""> <span id="inputClear" class="glyphicon glyphicon-remove-circle"></span> </span> <!-- <span class="input-group-btn"> <button id="submitQuery" type="submit" class="btn btn-primary" type="button">查询</button> </span> -->
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;
} */都不行。
还是自己去实现吧。
【总结】
暂时没有实现要的效果，而只是加了另外按钮去实现：
代码：
<input id="inputQuery" type="search" class="form-control" placeholder="请输入要查询的英文绘本名称" value=""> <span class="input-group-btn"> <!-- <span class="input-group-append"> --> <button id="clearInput" type="clear" class="btn btn-secondary" type="button">清除</button> <!-- <button id="clearInput" type="clear" class="btn btn-outline-secondary" type="button">清除</button> --> <button id="submitQuery" type="submit" class="btn btn-primary" type="button">查询</button> </span>
效果：
后来换成：
<span class="input-group-btn"> <!-- <span class="input-group-append"> --> <!-- <button id="clearInput" type="clear" class="btn btn-secondary" type="button">清除</button> --> <!-- <button id="clearInput" type="button" class="close" aria-label="Close">X</button> --> <button id="clearInput" type="clear" class="btn btn-outline-secondary" type="button">X</button> <!-- <button id="submitQuery" type="submit" class="btn btn-primary" type="button">查询</button> --> <button id="submitQuery" type="submit" class="btn" type="button">查询</button> </span>
效果：
不能接受，再去尝试弄成x放输入框里面
bootstrap input clear button
效果不错
去试试
结果不显示
然后去看看在线页面为何有效果，发现是
glyphicon glyphicon-remove
是能显示的：
-》我这是bootstrap 4，没有Validation states
搜：
参考
得到如下效果：
估计是
material-icons
导致的
抽空改为自己的试试
然后调试发现：
也是字体：
.material-icons
的问题：
所以去搜：
bootstrap 4 Material Icons
或者换用别的font也可以？
* Iconic
* Octicons
发现这里有：
所以问题就转化为：
【已解决】Bootstrap 4中如何引用其他字体比如Font Awesome
【总结】
最后通过：
html
<!-- <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" type="text/css" rel="stylesheet"> --> <!-- <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous"> --> <!-- <link rel="stylesheet" href="css/font-awesome-4.7.0/css/font-awesome.css"> --> <link rel="stylesheet" href="css/font-awesome-4.7.0/css/font-awesome.min.css"> <div class="input-group input_query_group"> <div class="form-group position-relative col-10"> <input id="inputQuery" type="search" class="form-control" placeholder="请输入要查询的英文绘本名称" value=""> <span class="form-clear d-none"><i class="fa fa-times"></i></span> </div> <button id="submitQuery" type="submit" class="btn col-2" type="button">查询</button> </div>
加上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;
} */效果是：
输入内容后，可以输出x：
对应的是font awesome的图标：
【后记1】
记过上线后，发现：
移动端，iOS或Android都显示不出来x：
iPhone6：
Android 锥子M1L：
Mac 中的Safari 模拟iOS也不行：
但是
Mac Chrome 模拟iPhone
却可以显示出x：
注意到：
布局也乱了：输入框左边的边距都没了
-》发现相当于：
.input_query_group {
没了：
padding-left: 39px;
不过过会调试发现，mac中Safari模拟iOS是可以显示x的：
难道是缓存问题？
那就多等一段时间再去试试
然后发现不是：
只是微信浏览器的原因
Android中换成QQ浏览器，就可以显示了：
所以现在结论是：
PC端或手机端，清除按钮都是可以正常显示的
-》但是微信端，不论是iOS还是Android，都会不能正常显示，且输入框的布局都有问题：边距都不正常。真很无语。