我在 WordPress 網(wǎng)站上有一個簡單的搜索表單，由于某種原因，搜索輸入元素上的height和paddingCSS 屬性不起作用。我不知道為什么？代碼如下，或者您可以在 CodePen 上查看：https://codepen.io/emilychews/pen/NWqBEXq非常感謝任何幫助。這讓我有點瘋狂。SCREENSHOT - 搜索元素的高度應(yīng)為 2rem，內(nèi)邊距為 2rem。body { width: 100%; height: 100vh; margin: 0; padding: 0; display: flex; align-items: center; justify-content: center;}#s{ width: 20rem; height: 2rem; /* not working */ padding: 2rem; /* not working */}<div id="form-wrap"> <form id="site-search-form"> <div id="site-search-input-wrap"> <input id="s" name="s" type="search" placeholder="Enter your search"> <input class="site-search-submit" type="submit" value="SEARCH"> </div> </form></div>
2 回答
哆啦的時光機(jī)
TA貢獻(xiàn)1779條經(jīng)驗 獲得超6個贊
瀏覽器并不會真正讓你搞亂input type="search"CSS-Tricks 有一個非常好的概述。
如果樣式很重要，我要么找到一個組件，要么使用 Javascript 更改input type="text"并復(fù)制其他所需的搜索功能（例如建議列表或歷史記錄）。
簡單的文本搜索很可能可以像文本輸入一樣工作。
藍(lán)山帝景
TA貢獻(xiàn)1843條經(jīng)驗 獲得超7個贊
我找到了解決方案 - 您需要border向search輸入元素添加 CSS 屬性，否則默認(rèn)邊框?qū)⒈Ａ簦瑥亩拗圃氐囊曈X高度。例如添加border: 1px solid可以解決問題。
- 2 回答
- 0 關(guān)注
- 127 瀏覽
添加回答
舉報
0/150
提交
取消