聚焦时禁用文本区域中突出显示的下划线答案

【问题标题】：Disable highlighted underline in textarea when in focus聚焦时禁用文本区域中突出显示的下划线
【发布时间】：2019-06-22 01:53:28
【问题描述】：

我在 react 应用中有一个 textarea，目前当你点击它时，底部的高光比其他的要厚，如下图所示。如何禁用此功能并使整个框正常均匀地突出显示？

【问题讨论】：

Remove all stylings (border, glow) from textarea的可能重复

标签： javascript html css reactjs textarea

【解决方案1】：

您可以使用 CSS 和 :focus 选择器来设置控件获得焦点时的样式。以下 CSS 将在 textarea 控件获得焦点时为其周围添加一个 2 像素宽的边框。

textarea:focus {
    border: 2px solid blue;
}

【讨论】：

谢谢，但是当我尝试底部边框仍然比其他边框厚时。我也尝试过让这个！重要。
可能还有 box-shadow 设置，所以你可以尝试包括box-shadow: 0;
似乎也不是盒子阴影。真的不确定，当我检查时显示的 CSS 似乎也没有相关。可能需要做更多的挖掘工作。
你在使用 UI 框架吗？您也可以尝试在 textarea 的 style 属性中设置这些属性，看看它是否与 CSS 相关。

【解决方案2】：

根据需要设置边框属性，如下所示

textarea {
border: 1px solid #eee;
}

&lt;textarea cols="50"&gt;&lt;/textarea&gt;

【讨论】：

【解决方案3】：

    .form-group.form-md-line-input .form-control.edited:not([readonly]) ~ label:after, .form-group.form-md-line-input .form-control.edited:not([readonly]) ~ .form-control-focus:after, .form-group.form-md-line-input .form-control:focus:not([readonly]) ~ label:after, .form-group.form-md-line-input .form-control:focus:not([readonly]) ~ .form-control-focus:after, .form-group.form-md-line-input .form-control.focus:not([readonly]) ~ label:after, .form-group.form-md-line-input .form-control.focus:not([readonly]) ~ .form-control-focus:after {
   background: none !important;
}

//If you send code i can help you.

【讨论】：