从 textarea 中删除所有样式（边框、发光）答案

【问题标题】：Remove all stylings (border, glow) from textarea从 textarea 中删除所有样式（边框、发光）
【发布时间】：2013-06-11 04:11:28
【问题描述】：

如果可能的话，我想从 textarea 中删除样式并将其全部保留为白色，没有任何边框或发光。我已经尝试过在 SO 上找到的不同的东西，但没有任何效果（用 FF 和 Chrome 尝试过）。

那么，有可能吗？如果可以，该怎么做？

到目前为止我所做的尝试：

textarea#story {
  // other stuff
  -moz-appearance:none;
  outline:0px none transparent;
}

textarea:focus, input:focus{
    outline: 0;
}

*:focus {
    outline: 0;
}

【问题讨论】：

您尝试过 CSS 重置吗？

标签： css forms textarea border

【解决方案1】：

发光效果最有可能由 box-shadow 控制。除了添加 Pavel 所说的内容之外，您还可以为不同的浏览器引擎添加 box-shadow 属性。

textarea {
    border: none;
    overflow: auto;
    outline: none;

    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;

    resize: none; /*remove the resize handle on the bottom right*/
}

您也可以尝试添加 !important 来确定此 CSS 的优先级。

【讨论】：

你也可以用resize: none;去掉右下角的resize手柄
答案很好，但不完整，如果不添加焦点修饰符，这将无法正常工作，例如 textarea:focus { border: none;溢出：自动；大纲：无； -webkit-box-shadow：无； -moz-box-shadow：无；盒子阴影：无；调整大小：无； } 然后它会工作

【解决方案2】：

如果你想删除一切：

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

【讨论】：

不错。添加“边界半径：0；”如果您要重新添加边框以 git 摆脱文本表单中的曲线。
这个答案优于接受的答案，因为它包含“resize: none”，而接受的答案是缺失的。

【解决方案3】：

试试这个：

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

jsbin：http://jsbin.com/orozon/2/

【讨论】：

试过但没有任何反应：/
嗯，我根本没有样式...你尝试过 jsbin 链接吗？
试过你的 jsbin 并且有效，但在我的代码中不适合我。我想知道它是否与 Twitter Bootstrap 有关？当我在每一行后面加上“！important”时，很多样式都被删除了，但顶部、左侧和右侧（底部是白色的）仍然有一个小的、浅色的边框。奇怪...
@holyredbeard 你试过将上面的样式应用到 :focus 选择器吗？
resize: none; 也有帮助。 +1 为 jsbin 链接

【解决方案4】：

您想要一个没有边框的最小textarea，或resize-drag-icon。

未选中时和focus时。

这很简单，但您需要通过 JS 更新 rows 属性，因为在文本输入期间添加或删除换行符。

这里是 CSS

textarea, textarea:focus
{
    font-family: "roboto","Helvetica Neue",Helvetica,Arial,sans-serif; /* make your choice */
    font-size: 11px;                                                   /* make your choice */ 
    border: none;
    background: transparent;
    -webkit-appearance: none;
    -moz-apperarance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
    outline: none;
    padding: 0px;
    resize: none;
    width: 100%;
    overflow: hidden;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -ms-box-shadow: none;
    -o-box-shadow: none;
    box-shadow: none;
}

为了使事情按预期工作（看起来不错），您必须以编程方式将textarea 的属性rows 设置/更新为\r\n 的计数textarea 内容加1 设置内容时和更新时（用户输入/其他）

【讨论】：