css - input中transition 設(shè)置background-color過渡,chrome瀏覽器頁面初始化渲染會有過度效果
問題描述
.search-input{width: 241px;padding: 5px 32px 5px 12px;border: 1px solid #fd2d59;border-radius: 18px;border-color: #ebebeb;background-color: #f7f7f7;font-size: 12px;line-height: 18px;-webkit-transition: background-color .5s ease-in-out 0s;-moz-transition: background-color .5s ease-in-out 0s;-o-transition: background-color .5s ease-in-out 0s;transition: background-color .5s ease-in-out 0s;&:focus{ background-color: #fff;} }
問題解答
回答1:你這是SASS?看見里面套了個
&:focus{ background-color: #fff;}
如果瀏覽器一打開,這個input就自動獲得焦點了,那么就會立馬改變背景色了,并不是瀏覽器初始化的問題
回答2:chrome的已知bug,谷歌一直未修復(fù),html 中加入 script 標(biāo)簽可以解決例如:<script>0</script>
stackoverflow
