我創(chuàng)建了一個(gè)自定義“搜索框”。“搜索框”實(shí)際上是由 div 和在其中輸入文本構(gòu)建的。稍后我將在左側(cè)添加“搜索”圖標(biāo)，在右側(cè)添加“清除”按鈕。問(wèn)題是，div 內(nèi)的輸入已經(jīng)根據(jù)其容器調(diào)整了大小，當(dāng)我聚焦輸入文本時(shí)，我找不到擴(kuò)展父 div（而不是輸入本身）的方法。重要的是 div 將展開(kāi)，以便我稍后添加的圖標(biāo)和按鈕將隨輸入展開(kāi)。找不到僅使用 CSS（不使用 JS）的方法。將感謝您的幫助！<!DOCTYPE html><html><head><style> * { box-sizing: border-box;}.App { width: 100%; height: 200px; background-color: tan;}.fieldcontainer { display: flex; padding-left: 8px; background-color: #CCCCCC; border-color: grey; width: 300px; min-height: 35px; align-items: center; justify-content: space-between; border-radius: 8px; cursor: default; transition: 'background-color' 0.4s;}.fieldcontainer:hover { background-color: #C3C3C3;}.searchfield { background-color: inherit; font-size: 1em; border: 0; flex-grow: 8; transition: all 0.4s linear;}.searchfield:focus { outline: none; width: 100%;}</style></head><body><div class="App"> <div class="fieldcontainer"> <input class="searchfield" type="text" placeholder="search" /> </div></div></body></html>
1 回答
海綿寶寶撒
TA貢獻(xiàn)1809條經(jīng)驗(yàn) 獲得超8個(gè)贊
使用focus-within（https://developer.mozilla.org/fr/docs/Web/CSS/:focus-within）
* {
box-sizing: border-box;
}
.App {
height: 200px;
background-color: tan;
}
.fieldcontainer {
display: flex;
padding-left: 8px;
background-color: #CCCCCC;
border-color: grey;
width: 300px;
min-height: 35px;
align-items: center;
justify-content: space-between;
border-radius: 8px;
cursor: default;
transition: 0.4s;
}
.fieldcontainer:hover {
background-color: #C3C3C3;
}
.searchfield {
background-color: inherit;
font-size: 1em;
border: 0;
flex-grow: 8;
transition: all 0.4s linear;
outline:none;
}
.fieldcontainer:focus-within {
width: 100%;
}
<div class="App">
<div class="fieldcontainer">
<input class="searchfield" type="text" placeholder="search" />
</div>
</div>
- 1 回答
- 0 關(guān)注
- 163 瀏覽
添加回答
舉報(bào)
0/150
提交
取消