Question

我想将我网站上几个textareas的背景颜色设置为白色以外的其他颜色。

＆＃13;

textarea
{
  background-color:Red;
  width:120px;
  height:80px;
}

＆＃13;

<textarea>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</textarea>

＆＃13;

上面的代码段工作得非常好，除非应用于firefox中具有滚动条的可调整大小的textarea。

背景和textarea右下方的小拖曳角变成红色，滚动条保持不变，但由于可拖动的角落在滚动条下方，它看起来有点愚蠢。
有没有办法既可以为滚动条着色，也可以不对角落着色，最好只使用CSS？

Answer 1

不幸的是，在Firefox中，你无法灵活地使用textarea抓取器（至少目前为止）。您可以做的最大值是使用

禁用它

textarea {
  resize: none; /* disables resizability */
}

此found here

的其他选项

但是对于webkit浏览器，虽然还有更多选项

您只能使用background-color或甚至背景图片

自定义抓取器

#textarea::-webkit-resizer { 
   background-color: green; 
}

#textarea::-webkit-resizer { 
   background-image: url(resizer-background.png); 
}

或者甚至只是隐藏它 - 这与resize: none;不同，这只是隐藏它而不是禁用它

::-webkit-resizer {
  display: none;
}

希望你有更好的理解。

Firefox中可调整大小的textarea的背景颜色

1 个答案: