使用CSS僅禁用輸入樣式

Question

我有種奇怪的情況。我試圖設計一個禁用的輸入按鈕，因爲我有一個惱人的懸停將文本變成白色。這使用戶感到困惑，因爲它的行爲就像一個普通的按鈕。

我已經嘗試了一些東西，主要是CSS和幾個jQuery的東西。如果可能的話，我想保留在CSS中。

這是我的html，對不起，它是在一個更加尖銳的形式助手。

{{ Form::submit('Change', array_merge($design_project->is_locked ? ['disabled' => 'disabled'] : [], ['class' => 'btn btn-blue span3'])) }} 

，這是什麼瀏覽器會產生

<input disabled="disabled" class="btn btn-blue span3" type="submit" value="Change"> 

和我工作這樣的事情

.btn:hover input[disabled], .btn:active input[disabled], .btn:focus input[disabled]{ 
    color:green 
} 

任何幫助將是美好的！

Answer 1

使用此CSS（jsFiddle example）：

input:disabled.btn:hover, 
input:disabled.btn:active, 
input:disabled.btn:focus { 
    color: green 
} 

你必須寫在左邊和最外層元素右邊最裏面的元素。

.btn:hover input:disabled將選擇包含在當前被用戶徘徊的類btn的元素中的任何禁用的輸入元素。

我寧願:disabled超過[disabled]，看到這個問題的討論：Should I use CSS :disabled pseudo-class or [disabled] attribute selector or is it a matter of opinion?

---

順便說一句，Laravel（PHP）生成HTML - 而不是瀏覽器。

Answer 2

CSS選擇器中的空間選擇子元素。

.btn input 

這基本上就是你寫的，它會選擇具有btn類中的任何元素中<input>元素。

我認爲你正在尋找

input[disabled].btn:hover, input[disabled].btn:active, input[disabled].btn:focus 

這將選擇<input>元素，其的hover，active和focus了三個不同的狀態disabled屬性和btn類。

Answer 3

這麼說吧，你有3個按鈕：

<input type="button" disabled="disabled" value="hello world"> 
<input type="button" disabled value="hello world"> 
<input type="button" value="hello world"> 

款式禁用的按鈕，你可以使用下面的CSS：

input[type="button"]:disabled{ 
    color:#000; 
} 

這隻會影響到按鈕，這被禁用。

要停止色變徘徊，你可以使用這個太時：

input[type="button"]:disabled:hover{ 
    color:#000; 
} 

您也可以通過使用CSS復位避免這種情況。