如何更改在CSS中使用焦點選擇器的文本框的高亮顏色

Question

我是新來CSS。我有一個輸入文本字段，我需要將邊框的顏色從紅色更改爲另一種顏色。我在CSS中使用了對焦選擇器，但未成功。
下面是輸入字段：

<label>Phone<font color="red">*</font></label><br> 
<span> 
    <input id="element_4_1" name="element_4_1" class="element text" size="3" maxlength="3" value="" type="text"> - 
</span> 
<span> 
    <input id="element_4_2" name="element_4_2" class="element text" size="4" maxlength="4" value="" type="text"> - 
</span> 
<span> 
    <input id="element_4_3" name="element_4_3" class="element text" size="10" maxlength="10" value="" type="text" required > 
</span> 

而CSS：

.element text:focus { 
    border-color: #66afe9; 
    outline: 0; 
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6); 
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6); 
} 

編輯： 當我點擊提交表單，因爲它是一個必填字段，這個節目紅色如果是空的。 現在它不工作。當我關注它時，如何更改文本框的高亮顏色。

Answer 1

很顯然，這將無法正常工作，你的選擇是錯誤的，你正在使用.element text它選擇的元素<text>（無效標籤）這是嵌套在元素具有class.element應該

.element.text:focus 
     --^-- 
/* No space as well */ 

Demo

Demo 2（使它LIL清潔器）

Demo 3（動畫的:focus）

span input[type="text"]:focus { /* You can also use .element.text:focus here */ 
    border-color: #66afe9; 
    outline: 0; 
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6); 
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6); 
} 

Answer 2

.從text類丟失並嘗試從輸入指向

input.text:focus { 
    border-color: green; 
    outline: 0; 
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6); 
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6); 
} 

DEMO

Answer 3

您正在使用.element text:focus由於.element中沒有像文字這樣的元素，因此不會選擇任何內容。代替這個，你必須使用.element.text:focus 例如。

.element.text:focus{ 
    ... 
}