CSS焦點子元素更改父元素

我想要樣式表單中具有標籤和輸入表單字段內，當我將寫入輸入內容（可能與焦點），我希望邊界點亮與一些藍色。現在，我有這樣的事情：CSS焦點子元素更改父元素

HTML

<div class="login-form-field"> 
    <label for="email" class="login-form-label">Email:</label> 
    <input class="login-form-input" autofocus="autofocus" type="email" value="" name="user[email]" id="user_email"> 
</div>

CSS

.login-form-input{ 
    margin-left: 20px; 
    width: 90%; 
    outline: none; 
    border: none; 
    -webkit-box-shadow: none; 
    -moz-box-shadow: none; 
    box-shadow: 0 0 0px 1000px white inset; 
} 
.login-form-label { 
    font-size: 13px; 
    font-weight: 300; 
    padding-left: 20px; 
} 
.login-form-field{ 
    width: 100%; 
    border-radius: 0px; 
    height: 6rem; 
    border: 0.5px solid grey; 
    box-shadow: 0px 0px 0px; 
}

我已經嘗試選擇父母做了一些變化和其他的東西，我在谷歌找到。我得到的最接近的是當鼠標懸停時用藍色突出顯示：懸停，但我需要顏色留在我選擇的輸入中。

.login-form-field:hover { 
    border-color: blue !important; 
}

這裏是JSFiddle，如果有人能幫助我將不勝感激！

來源

2016-07-28 Raven the Bard

陣營使用jQuery：

$(document).ready(function() { 
    console.log("ready!"); 

    $('.login-form-input').focus(function() { 
     $(this).parent().css("border", "#99f 2px solid"); 
    }); 

    $('.login-form-input').focusout(function() { 
     $(this).parent().css("border", ""); 
    }); 

});

來源

2016-07-28 19:26:52

jsfiddle.net/7AaDc/220 – 2016-07-28 21:54:57

感謝您的幫助！它的工作，並沒有搞砸了代碼，我想我可以做到這一點，而不會讓一團糟哈哈 –

-3

，如果你想給的邊框顏色時輸入有效，你可以添加這樣的：

.login-form-input:focus { 
    border:1px solid blue; 
}

來源

2016-07-28 19:17:06

CSS沒有爲父母選擇的原生支持。如果您的目標是在focus上有.login-form-field的藍色邊框，您將不得不依靠JavaScript來添加相應的CSS。

下面的CSS：

.login-form-field.highlight { 
    border-color: blue; 
}

用下面的jQuery

$('.login-form-field').hover(function() { 
    $(this).toggleClass('highlight'); 
});

將實現這一目標。我應該注意到jQuery在這裏當然沒有必要;這正是我喜歡使用的。

來源

2016-07-28 19:18:26

我想你確實意味着'焦點（）'，對吧？ – nicael

@nicael是;對於更具體的事件，我可能會使用'$（'。login-form-input'）行中的某些內容。 }）。blur（function（）{$（this）.parent（）。removeClass（'highlight'）;}）;'因爲這隻會觸發確切的'input'焦點。 –

感謝您的幫助！ –

你可以這樣做，在那裏你增加一個額外的div，絕對定位，作爲邊界，...並且不需要腳本。

.login-form-input { 
 
    margin-left: 20px; 
 
    width: 90%; 
 
    outline: none; 
 
} 
 

 
.login-form-label { 
 
    font-size: 13px; 
 
    font-weight: 300; 
 
    padding-left: 20px; 
 
} 
 

 
.login-form-field { 
 
    position: relative; 
 
    width: 100%; 
 
    border-radius: 0px; 
 
    height: 6rem; 
 
    box-shadow: 0px 0px 0px; 
 
} 
 
.login-form-field input ~ .login-form-field-border { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    box-sizing: border-box; 
 
    border: 0.5px solid grey; 
 
    z-index: -1 
 
} 
 
.login-form-field input:focus ~ .login-form-field-border { 
 
    border: 2px solid blue; 
 
}

<div class="login-form-field"> 
 
    <label for="email" class="login-form-label">Email:</label> 
 
    <input class="login-form-input" autofocus="autofocus" type="email" value="" name="user[email]" id="user_email"> 
 
    <div class="login-form-field-border"></div> 
 
</div>

來源

2016-07-28 19:24:09 LGSon

感謝您的幫助！ –

現在，您可以在純CSS這樣做，所以不需要的JavaScript。

新的CSS僞類:focus-within將有助於這樣的情況，並有助於人們使用tabb進行導航時的可訪問性，在使用屏幕閱讀器時很常見。

.login-form-field:focus-within { 
    border-color: blue !important; 
}

的：對焦內僞類匹配元件，要麼本身匹配：焦點或具有後代，其匹配：焦點。

您可以檢查哪些瀏覽器都支持這個http://caniuse.com/#search=focus-within

來源

2017-08-14 12:30:39

CSS焦點子元素更改父元素

回答

相關問題