我试着创建一个类似谷歌的搜索栏.我编写了以下HTML:
<div id="settings-menu">
<div class="search">
<div class="search-icon"><i class="fi-xwluhl-magnifying-glass-wide"></i></div>
<div class="input">
<input type="text" placeholder="Search" id="settings-search">
</div>
<span class="clear interactive"><i class="fi-xwluxl-times-wide"></i></span>
</div>
</div>
以及用于输入元素的以下css:
#settings-menu input {
width: 100%;
height: 100%;
border: none;
font-size: 16px;
background-color: var(--main-bg-color);
color: var(--main-color);
}
结果如下:
我不明白为什么输入的内容会让家长们感到不知所措. 下面是JSfiddle:https://jsfiddle.net/Imabot/ub4y7w8f/中的完整代码
欢迎任何帮助(和解释)！