HTML textarea постоянный цвет границы

Question

Я пытаюсь установить цвет своего текстового поля ПОСТОЯННО (не в фокусе) до определенного цвета .. И он не работает ... Я использую bootstrap (я не знаю, может ли он это связано с этим), но по какой-то причине я не могу установить ПОСТОЯННЫЙ цвет границы моего текстового поля. У меня это в моем CSS (и я пробовал другие комбинации, которые я видел переполнение стека), но это не работает.

textarea{ 


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

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

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

} 

Ширина и высота работ, поэтому не беспокойтесь об этом.

Мой TextArea в HTML выглядит следующим образом:

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

Да, он находится внутри таблицы, в которой у меня есть несколько текстовых областей, но все еще (не знаю, если то причине, я не думаю так) ..

Спасибо!

Кевин

Answer 1

Берегитесь у вас есть класс .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

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

Хорошо это было легко исправить ... я целенаправленные по ID .. Я сказал:

#task1{ 
border-color:red; 
} 

и это сработало!

Answer 3

Вы должны установить:

border: 1px solid red; 

или

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