css - input中transition 设置background-color过渡,chrome浏览器页面初始化渲染会有过度效果
高洛峰
高洛峰 2017-04-17 14:46:38
0
2
682
.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; } }
高洛峰
高洛峰

拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师,...

reply all (2)
Ty80

你这是SASS?看见里面套了个

&:focus{ background-color: #fff; }

如果浏览器一打开,这个input就自动获得焦点了,那么就会立马改变背景色了,并不是浏览器初始化的问题

    PHPzhong

    chrome的已知bug,谷歌一直未修复,html 中加入 script 标签可以解决
    例如:

    stackoverflow

      Latest Downloads
      More>
      Web Effects
      Website Source Code
      Website Materials
      Front End Template
      About us Disclaimer Sitemap
      php.cn:Public welfare online PHP training,Help PHP learners grow quickly!