解決html中input的placeholder的顏色，點選時消失，input點選時樣式的問題

eternalshallow發表於2017-12-14
HTML
<input placeholder="暑期大促" onfocus="this.placeholder=''" onblur="this.placeholder='暑期大促'" type="text">
複製程式碼

對於瀏覽器不相容的，使用以下程式碼，更改placeholder的字型顏色等

.search-input input::-webkit-input-placeholder{
    color: #000;
}
.search-input input:-moz-placeholder{
    color: #000;
}
.search-input input::-moz-placeholder{
    color: #000;
}
.search-input input:-ms-input-placeholder{
    color: #000;
}
複製程式碼

使用outline來控制點選input時input邊框樣式的改變

input{
  outline:none;
}
複製程式碼

控制placeholder點選時消失文字，離開後文字重新顯示，使用一個小小的js就可以了

onfocus="this.placeholder=''" /*點選的時候文字設定為空*/
onblur="this.placeholder='暑期大促'" /*離開的時候文字顯示出來*/
複製程式碼

將這一部分程式碼新增到就可以

相關文章