用户:CrablePotion/CSS/动态搜索栏.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;

}

.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;

}