移除textarea的所有样式（边框，发光效果）。

21 浏览
0 Comments

移除textarea的所有样式（边框，发光效果）。

我想要去除文本区域的样式，让它完全变为白色，没有边框或光晕，如果可能的话。我尝试了在这里找到的不同方法，但是没有有效（在FF和Chrome上尝试过）。\n那么，是否有可能实现，并且如果可以的话，如何做到呢？\n[图片描述](https://i.stack.imgur.com/ekC5J.png)\n我尝试过的方法：\n

textarea#story {
  // 其他样式
  -moz-appearance:none;
  outline:0px none transparent;
}
textarea:focus, input:focus{
    outline: 0;
}
*:focus {
    outline: 0;
}

0

3 答案

0 Comments

问题的出现原因是在textarea中存在一些样式（如边框、发光效果），但是这些样式需要被移除。解决方法是使用以下代码来移除样式：

textarea {
    border-style: none;
    border-color: Transparent;
    overflow: auto;
    outline: none;
    resize: none;
}

同时，也可以尝试将上述样式应用于`:focus`选择器。另外，还有一个jsbin链接提供了可行的解决方案。

0
0 Comments

问题出现的原因：想要去掉textarea元素的所有样式（边框、发光效果）。

解决方法：

可以使用以下代码来移除textarea元素的所有样式：

textarea {
    border: none;
    background-color: transparent;
    resize: none;
    outline: none;
}

如果想要重新添加边框，并去掉文本框的圆角，可以添加"border-radius: 0;"样式。

这个解决方法比被接受的解决方法更好，因为它包含了"resize: none"这个被接受的解决方法中所缺少的样式。

0
0 Comments

问题的原因是文本框（textarea）的样式中包含了边框（border）和发光效果（glow），需要将这些样式移除。解决方法是在文本框的样式中添加以下代码：

textarea {
    border: none;
    overflow: auto;
    outline: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    resize: none; /*移除右下角的调整大小手柄*/
}

如果以上代码无法生效，可以尝试添加!important来优先应用这些CSS样式。同时，还可以使用resize: none;来移除右下角的调整大小手柄。

然而，以上答案并不完整，如果没有添加焦点（focus）修饰符，即textarea:focus { border: none; overflow: auto; outline: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; resize: none; }，则无法正常工作。

0