如何在輸入焦點時設置表單元素的樣式？

我有一個與下面的結構類似的表單。當input[type=text]聚焦時，如何使用CSS來設計input[type=submit]元素的樣式？如何在輸入焦點時設置表單元素的樣式？

例如：

<form id="example"> 
    <input type="text" name="search"> 
    <input type="submit" value="Search"> 
</form> 

<style> 
    #example > input[type="text"]:focus { 
     // please style input[type="submit"] 
    } 
</style>

我試圖做到這一點，因爲一個WordPress主題與搜索輸入一個搜索表單和提交按鈕內嵌。當用戶關注輸入時，我希望輸入字段和提交按鈕具有相同的邊框顏色更改。

或者，我可以在輸入和提交按鈕周圍設置整個div的樣式，但是當我們重點關注一個元素時，我們會回到設計另一個元素的樣式的問題。

這甚至可能與CSS3或我不得不求助於JavaScript函數？（最後的手段）

來源

2016-08-19 Kody

將需要的JavaScript –

如果實際代碼中的結構與您發佈的結構相同，則可以使用+（相鄰）選擇器在文本輸入焦點時選擇提交按鈕。

這是你要找的選擇：#example > input[type="text"]:focus + input[type="submit"]

想了解更多關於+選擇，this answer to "What does the 「+」 (plus sign) CSS selector mean?"解釋了它在很短的方式，甚至涵蓋了瀏覽器的支持。

下面是一個片段，展示它的行動。不看太漂亮了，但也在使用jQuery的方式做工作:)

#example > input[type="text"]:focus + input[type="submit"] { 
 
    background: gray; 
 
}

<form id="example"> 
 
    <input type="text" name="search"> 
 
    <input type="submit" value="Search"> 
 
</form>

來源

2016-08-19 23:28:45

是，這將工作，如果在兩個'的 –

@AdamBuchananSmith之間沒有任何東西，我已經開始我的答案了「如果實際代碼中的結構與你'相同電子郵件問題「。不知道我需要說些什麼才能清楚說明這項工作需要什麼。 –

哦，我打了一個神經？我贊成你的回答，因爲它從字面上回答了這個問題。對不起我剛給你造成的所有痛苦。 –

這裏，看到小提琴https://jsfiddle.net/t33rdra6/2/

$(document).ready(function() { 

    $('input').blur(function() { 
     $('input[type="submit"]').removeClass("focus") 
     }) 
     .focus(function() { 
     $('input[type="submit"]').addClass("focus"); 
     }); 
    });

來源

2016-08-19 23:31:08

如何在輸入焦點時設置表單元素的樣式？

回答

相關問題