問(wèn)題描述
我正在為我的網(wǎng)站創(chuàng)建一個(gè)登錄頁(yè)面，我想在文本框獲得焦點(diǎn)時(shí)將輸入框之前的標(biāo)簽加粗.現(xiàn)在我有以下標(biāo)記:
I'm working on a login page for my website and I want to bold the label that comes before the input box when the text box gains focus. Right now I have the following markup:
<label for="username">Username:</label>
<input type="textbox" id="username" />
<label for="password">Password:</label>
<input type="textbox" id="password" />
我可以使用相鄰選擇器選擇標(biāo)簽after文本框，但我不能選擇它之前的元素.我可以使用這個(gè) CSS 選擇器規(guī)則，但它只選擇后面的標(biāo)簽，所以當(dāng)用戶名文本框獲得焦點(diǎn)時(shí)，密碼標(biāo)簽變?yōu)榇煮w.
I can use the adjacent selector to select the label after the text box, but I can't select the element before it. I can use this CSS selector rule, but it only selects the label after, so when the username text box gains focus, the password label becomes bold.
input:focus + label {font-weight: bold}
我能做些什么來(lái)完成這項(xiàng)工作嗎?我知道 JavaScript 可以很容易地做到這一點(diǎn)，但如果可能的話，我想使用一個(gè)純基于 CSS 的解決方案，我只是想不出辦法.
Is there anything I can do to make this work? I know JavaScript could be used to easily do this, but I'd like to use a purely CSS-based solution if possible, I just can't figure out a way to do it.
推薦答案
如果 input 在 label 之前，則可以使用相鄰兄弟選擇器".只需將 input 放在 label 之前，然后修改布局將 label 放在 input 之前.這是一個(gè)例子:
It would be possible to use the 'adjacent sibling selector' if the input was before the label. Just put the input before the label, and then modify the layout to put label before the input. Here's an example:
<head runat="server">
<title></title>
<style type="text/css">
input:focus + label {font-weight: bold}
</style>
</head>
<body>
<form id="form1" runat="server">
<div style="direction:rtl">
<input type="text" id="username" />
<label for="username">Username:</label>
</div>
<div style="direction:rtl">
<input type="password" id="password" />
<label for="password">Password:</label>
</div>
</form>
</body>
(這是一種 hack，我個(gè)人會(huì)使用 javascript 來(lái)做到這一點(diǎn))
(It's kind of a hack, I would personally use javascript to do this)
input:focus + label {font-weight: bold}<form id="form1" runat="server">
<div style="direction:rtl">
<input type="text" id="username" />
<label for="username">Username:</label>
</div>
<div style="direction:rtl">
<input type="password" id="password" />
<label for="password">Password:</label>
</div>
</form>這篇關(guān)于CSS選擇器用于選擇另一個(gè)元素之前的元素?的文章就介紹到這了，希望我們推薦的答案對(duì)大家有所幫助，也希望大家多多支持html5模板網(wǎng)！