如何修改textarea默认边框为浅灰色并覆盖用户代理样式表

问题原因及解决方案 #

你目前的代码存在两处逻辑错误，导致效果不符合预期：

• 没有给textarea默认状态设置边框属性，仅设置了宽和缩放属性，所以默认会使用浏览器自带的边框样式
• 给::placeholder伪元素设置了border-color属性，而placeholder的文字颜色需要用color属性控制，边框属性对placeholder无效

浏览器默认（用户代理）样式的优先级非常低，只要你针对对应元素正确编写CSS属性，就可以直接覆盖，不需要特殊处理。如果遇到样式不生效的情况，可以优先检查属性是否写对、选择器是否匹配、有没有更高优先级的样式覆盖你的代码。

修正后的完整代码 #

HTML代码

<label for="" class="field_label">What</label>
<textarea placeholder="请输入内容" id=""></textarea>

CSS代码

textarea {
    resize: both;
    width: 100%;
    /* 新增以下内容修改默认边框样式，覆盖浏览器默认值 */
    border: 1px solid lightgrey;
    border-radius: 4px; /* 可选，统一不同浏览器的默认圆角样式 */
}

textarea::placeholder {
    /* 用color属性控制placeholder文字颜色 */
    color: lightgrey;
}

/* 可选：如果你需要自定义聚焦状态的边框样式可以添加以下代码 */
textarea:focus {
    outline: none;
    border-color: #86b7fe; /* 可替换为你想要的聚焦边框颜色 */
}

内容的提问来源于stack exchange，提问作者Mardhiah Hamid