用户:CrablePotion/CSS/动态搜索栏.css
< 用户:CrablePotion | CSS
.vector-search-box-input {
color: #000000;
height: 2.45384615em;
box-sizing: border-box;
border: 2px solid #a2a9b1;
border-radius: 4px;
box-shadow: inset 0 0 0 1px transparent;
font-size: 0.8125em;
direction: ltr;
transition: border-color 250ms ease-in-out, box-shadow 250ms ease-in-out;
width: 60%;
background-color: #fdf6e6;
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 0 0 0 6px;
transition: all 0.4s ease-in-out;
}
.vector-search-box-input:focus {
width: 100%;
}
.searchButton {
position: absolute;
bottom: 1px;
right: 40%;
min-width: 28px;
width: 2.45384615em;
border: none;
padding: 0;
cursor: pointer;
font-size: 0.8125em;
direction: ltr;
text-indent: -99999px;
white-space: nowrap;
overflow: hidden;
z-index: 1;
transition: all 0.4s ease-in-out;
}
.vector-search-box-input:focus~.searchButton {
right: 0;
}