HTML Textarea永久边框颜色

HTML Textarea permanent border color

本文关键字：边框 颜色 Textarea HTML      更新时间：2023-09-26

我一直在尝试将我的textarea的颜色永久(不聚焦)设置为某种颜色。但这行不通……我正在使用bootstrap(我不知道它是否可能与此有关)，但出于某种原因，我不能永久设置我的文本区域的边界颜色。我有这个在我的CSS(我已经尝试过其他组合，我已经看到堆栈溢出)，但它不起作用。

textarea{ 

  width: 650px; 
  min-width:650px; 
  max-width:650px; 
  height:400; 
  min-height:400px;  
  max-height:400px;
  border-color: red;                 /*NOT WORKING*/
}

宽度和高度可以工作，所以不用担心。

我的文本区域在html中看起来像这样:

<table class="table">
    <tr>
    <td><textarea id="task1" class="form-control"></textarea>
    </td>
</tr>

是的，它是在一个表中，我有几个文本区域，但仍然(不知道如果这是原因，我不这么认为)…

谢谢!

凯文

注意你有一个定义边界的类.form-control，将!important设置为你的textarea或添加一个更多的类，并在你的css中将该类的规则放在.fom-control之后。

选项1

CSS

textarea{ 
  width: 650px; 
  min-width:650px; 
  max-width:650px; 
  height:400; 
  min-height:400px;  
  max-height:400px;
  border:solid 1px orange !important;    
}

选项2 

<table class="table">
    <tr>
    <td><textarea id="task1" class="form-control orange-border"></textarea>
    </td>
</tr>
CSS

.form-control {
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
    color: #555;
    display: block;
    font-size: 14px;
    height: 34px;
    line-height: 1.42857;
    padding: 6px 12px;
    transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
    width: 100%;
}
.orange-border{ 
border:solid 1px orange;
}

演示

您需要设置:

border: 1px solid red;

或

border-width: 1px;
border-color: red;
border-style: solid;

这是一个简单的修复…我的目标是ID…我说:

#task1{
border-color:red;
}

成功了!

相关文章：