webkit 外观 - textarea 背景：无答案

【问题标题】：webkit appearance - textarea background: nonewebkit 外观 - textarea 背景：无
【发布时间】：2014-01-12 00:56:58
【问题描述】：

我有一个 webkit 外观问题。我想要完成的是使用一个分区作为一个内容可编辑的分区，并带有一个 textarea 的 webkit 外观。在我尝试删除背景之前，这非常有效。我可以毫无问题地更改颜色，但事实证明删除它是徒劳的。我尝试使用透明图像作为背景，但文本区域的外观似乎将其覆盖为特定颜色。

问题是，是否可以将 css 设置为 background: none;使用外观时。

我整理了一个 jsfiddle 作为进一步的解释。

.div1 {width: 350px;
height: 100px;
-webkit-appearance: textarea;
resize: both;
overflow: auto;}

jsfiddle

PS。我希望我做对了:)

【问题讨论】：

我在 Chrome 26 上的 .div1 上看不到任何背景。到目前为止对我有用。没有其他风格吗？
我认为使用 -webkit-appearance 时会添加背景。我相信它默认为白色。我正在尝试做的是将现在看起来像 textarea 的 div 的背景更改为无或透明。

标签： javascript jquery css webkit

【解决方案1】：

不要使用-webkit-appearance。

WebKit 正在将 textarea 的默认样式应用于您的 div。

CSS

.div1 {
    width: 350px;
    height: 100px;
    background: none;
    resize: both;
    overflow: auto;
    font-family: monospace;
    border: 1px solid #000;
}

textarea {
    background: none;
    width: 350px;
    height: 100px;
}

JSFiddle：http://jsfiddle.net/howderek/eMkv3/5/

【讨论】：

【解决方案2】：

只需将背景颜色更改为

background-color: rgba(255, 255, 255, 0);

这将使背景透明。如果它的 alpha（不透明度）为零，您可以将 RGB 设置为您想要的任何颜色。

http://jsfiddle.net/eMkv3/7/

这是我的浏览器上的屏幕截图：

【讨论】：

没有效果。如果我将颜色设置为： background-color: rgba(2, 2, 2, 100);
我想我错过了一些东西。它已经是透明的（在 chrome 26 上）并且将该颜色添加到任何东西都应该使其透明。
嗯，我也在 Chrome 26 上，你的 jsfiddle 的结果是白色背景。现在我完全感到困惑。谢谢你的屏幕。我会用 wtf 报告。