HTML Textarea永久边框颜色

Question

I have been trying to set the color of my textarea PERMANENTLY (not on focus) to a certain color.. And it does not work... I am using bootstrap( i dont know if it might have to do with this) but for some reason i cant set PERMANENTLY the border color of my textarea.. I have this in my CSS (and I have tried other combinations I have seen Stack overflow) but it does not work.

textarea{ 


  width: 650px; 
  min-width:650px; 
  max-width:650px; 

  height:400; 
  min-height:400px;  
  max-height:400px;

  border-color: red;                 /*NOT WORKING*/

}

Width and height works so dont worry about that.

My textarea in the html looks like this:

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

Yes, it is inside a table in which I have several textareas but still (Dont know if thats the reason, i dont think so)..

Thanks!

Kevin

Answer 1

Beware you have a class .form-control that define the border, set !important to your textarea or add one more class and in your css and place your rules of that class after where the .fom-control is.

OPTION 1

CSS

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

OPTION 2

HTML

<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;
}

DEMO HERE

Answer 2

You need to set:

border: 1px solid red;

or

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

Answer 3

Ok this was a simple fix... I targetted by ID.. I said:

#task1{
border-color:red;
}

and it worked!