html文本框选中后显示其它颜色

最新推荐文章于 2025-10-16 10:47:55 发布

原创最新推荐文章于 2025-10-16 10:47:55 发布 · 6.1k 阅读

5 ·

CC 4.0 BY-SA版权

❤️ 前端专栏收录该内容

3 篇文章

订阅专栏

博客介绍了解决文本框（input type=“text”或textarea）选中后显示蓝色的问题，并将其改成其它颜色（如粉色），涉及HTML和CSS相关内容。

解决文本框（input type=“text”或者textarea）选中后显示蓝色，并改成其它颜色（比如：粉色），效果如下：

1. text

html

<input type="text" name="title" id="title">

CSS

#title:focus{
     outline: none;
     border: 1px solid #fafafa;
     -webkit-box-shadow: 0px 0px 6px #ffbfbf;
     -moz-box-shadow: 0px 0px 5px #ffbfbf;
     box-shadow: 0px 0px 5px #ffbfbf;   
}

2. textare

html

 <textarea name="message" rows="10" cols="90"></textarea>

css

textarea{
    float: left;
    margin-top:20px;
    margin-bottom: 10px;
    width:700px;
}

textarea:focus{
    outline: none;
    border: 1px solid #fafafa;
    -webkit-box-shadow: 0px 0px 6px #ffbfbf;
    -moz-box-shadow: 0px 0px 5px #ffbfbf;
    box-shadow: 0px 0px 5px #ffbfbf; 
}