css 去除文字点击时蓝色背景，input,textarea 改变焦点样式，改变input,textarea 输入框提示语placeholder样式

最新推荐文章于 2024-12-02 08:29:46 发布

原创最新推荐文章于 2024-12-02 08:29:46 发布 · 891 阅读

0 ·

CC 4.0 BY-SA版权

本文深入探讨CSS中消除元素被选中时的蓝色背景及自定义输入光标颜色的方法。通过一系列的CSS代码示例，详细介绍了如何在不同浏览器下统一实现这些效果，包括火狐、WebKit浏览器、IE10等。

/*去除文字点击时的蓝色背景*/
*{
  -moz-user-select: none; /*火狐*/
  -webkit-user-select: none; /*webkit浏览器*/
  -ms-user-select: none; /*IE10*/
  -khtml-user-select: none;
  user-select: none;
}

光标

input,textarea{
            text-shadow: 0 0 0 #aaa;//文字颜色
            -webkit-text-fill-color: transparent;
        }

   input:focus,textarea:focus{color:#42b983}//光标颜色

placeholder

input::-webkit-input-placeholder ,textarea::-webkit-input-placeholder{ /* WebKit browsers */
    color: #fff;
}
input:-moz-placeholder,textarea:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #fff;
}
input::-moz-placeholder,textarea::-moz-placeholder { /* Mozilla Firefox 19+ */

    color: #fff;
}
input:-ms-input-placeholder,textarea:-ms-input-placeholder { /* Internet Explorer 10+ */
    color: #fff;
}