从文本区域中移除所有样式（边框，发光）。

Question

我希望从文本框中移除样式，并使其变成纯白色且没有边框或发光，如果可能的话。我已经在SO上尝试了各种方法，但都不起作用（在FF和Chrome上尝试过）。

那么，是否可能实现，如果可以，如何实现？

迄今为止我尝试过的：

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

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

*:focus {
    outline: 0;
}

- holyredbeard

---

你尝试过CSS重置吗？ - j08691

Answer 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*/
}

您也可以尝试在CSS中添加!important以提高优先级。

- IamShipon1988

---

您可以使用resize: none;来移除右下角的调整大小手柄。 - PhilT

答案很好，但不完整，如果您不添加焦点修饰符，例如textarea:focus { border: none; overflow: auto; outline: none;-webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; resize: none;} 那么它将无法正常工作。 - Aleksandr Sasha

Answer 2

如果你想要删除所有内容：

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

- Lucas B

---

很好。如果您要重新添加边框以消除文本表单中的曲线，请添加“border-radius: 0;”。 - stcorbett

这个答案比被采纳的答案更好，因为它包含了“resize: none”，而被采纳的答案则没有。 - Aaron

Answer 3

你想要一个没有边框或者调整大小拖动图标的最小化。

无论是未被选中还是被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，将textarea内容中\r\n的计数加1，无论是在设置内容时还是在更新（用户输入/其他）时。

 

- Paolo

Answer 4

试试这个：

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

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

- Pavel

---

尝试了一下，但是什么也没发生 :/ - holyredbeard

哦，我完全没有样式...你试过JSBin链接了吗？ - Pavel

尝试了你的jsbin，它可以工作，但在我的代码中不起作用。我想知道这是否与Twitter Bootstrap有关？当我在每一行后面加上"!important"时，很多样式都被移除了，但顶部、左侧和右侧仍然有一个小的浅色边框（底部是白色的）。奇怪... - holyredbeard

@holyredbeard，你尝试过将上述样式应用于 :focus 选择器吗？ - Matt Fricker

resize: none; 有所帮助。如果有 jsbin 链接，加1分。 - Cedomir Rackov