input樣式設置

input居中

和行內樣式一樣

<input text-align="center" vertical-align="middle"  />

input邊框樣式

input搜索框默認樣式會受outline覆蓋，因此設置outline:none;再設置邊框樣式

代碼

input {
  background: url("./search.svg") no-repeat;
  background-position: 10px;
  background-size: 25px 25px;
 
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translateX(-50%);
 
  height: 50px;
  width: 400px;
 
  border: 1px solid rgb(191,191,191);
  border-radius: 25px;
 
  box-shadow: 2px 2px 2px #eee;
  padding-left: 40px;
 
  font-size: 16px;
}

獲取焦點時的樣式：

/* input邊框的顏色，默認是outline控制的，不是border */
/* jQuery設置的border會生效（未嘗試） */
input:focus {
  background-image: url("./search-active.svg");
  border-color: #66afe9;
  outline: none;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
}

效果圖：

失去焦點時：

獲取焦點時：