[英]Selecting the first non-hidden input in a form
I am trying to select the first input in a form that isn't of type="hidden"
. 我试图选择非
type="hidden"
形式的第一个输入。
Consider this form: 考虑以下形式:
<form>
<input type="hidden" name="token" value="ABC123">
<input type="text" name="username">
<input type="password" name="password">
</form>
If I wanted to apply a specific style to the username field. 如果我想将特定样式应用于用户名字段。 I was assuming I could just use this or something like it.
我以为我可以使用它或类似的东西。 However, nothing that I've tried so far has worked.
但是,到目前为止,我没有尝试过。
input:not([type=hidden]):first-child {
background: orange;
}
I'd even be alright with something like input[type=text]:first-child
but that doesn't work either. 我什至可以使用
input[type=text]:first-child
但这也不起作用。
Here is the fiddle I used when writing this question. 这是我在写这个问题时使用的小提琴 。
Your example isn't working because the :first-child
pseudo class will only select the element if it is the first child. 您的示例不起作用,因为
:first-child
伪类仅在元素是第一个子元素的情况下才选择元素。 Since the first non-hidden input
element is not the first child, nothing is selected. 由于第一个非隐藏
input
元素不是第一个孩子,因此未选择任何内容。
Based on the HTML that you provided, you could use a combination of selectors to achieve this. 根据您提供的HTML,可以使用选择器的组合来实现此目的。
The first selector could be input:not([type="hidden"]):first-of-type
in order to select any non-hidden input
elements if it is the first of type. 第一个选择器可以是
input:not([type="hidden"]):first-of-type
,以便选择任何非隐藏的input
元素(如果它是第一个类型的话)。
The next selector selects the hidden input
element if it is the first of type, then utilizes the adjacent sibling combinator, +
, in order to select the next following non-hidden input
element: 如果下一个选择器是第一个类型,则下一个选择器选择隐藏的
input
元素,然后利用相邻的同级组合器+
来选择下一个接下来的非隐藏的input
元素:
input:not([type="hidden"]):first-of-type, input[type="hidden"]:first-of-type + input:not([type="hidden"]) { background: orange; }
<form> <input type="hidden" name="token" value="ABC123"> <input type="text" name="username"> <input type="hidden" name="token" value="ABC123"> <input type="password" name="password"> </form>
Since the :first-of-type
pseudo-class selects the first element by its type , it will work even if the first child element is a legend: 由于
:first-of-type
伪类通过其类型选择第一个元素,因此即使第一个子元素是图例也可以使用:
input:not([type="hidden"]):first-of-type, input[type="hidden"]:first-of-type+input:not([type="hidden"]) { background: orange; }
<form> <fieldset> <legend>Title</legend> <input type="hidden" name="token" value="ABC123"> <input type="text" name="username"> <input type="hidden" name="token" value="ABC123"> <input type="password" name="password"> </fieldset> </form>
However, since you stated that the hidden input
element is always first, then the following selector will suffice: 但是,由于您声明隐藏的
input
元素始终始终是第一个,因此以下选择器就足够了:
input[type="hidden"]:first-of-type + input:not([type="hidden"]) { background: orange; }
<form> <input type="hidden" name="token" value="ABC123"> <input type="text" name="username"> <input type="hidden" name="token" value="ABC123"> <input type="password" name="password"> </form>
But keep in mind that this won't work if there are two consecutive hidden input
elements like in the example below. 但是请记住,如果有两个连续的隐藏
input
元素(如下面的示例),则此方法将无效。 To work around cases like that, you would need to do what the other answer suggested and select all input
elements and then override all the following sibling elements using the general sibling combinator, ~
. 要解决这种情况,您需要执行其他答案所建议的操作,并选择所有
input
元素,然后使用通用的同级组合器~
覆盖所有以下同级元素。 I would suggest doing that if your HTML varies from any of the examples above. 如果您的HTML与上述任何示例不同,我建议您这样做。
input:not([type="hidden"]):first-of-type, input[type="hidden"]:first-of-type+input:not([type="hidden"]) { background: orange; }
<p> Example demonstrating that it doesn't work with two consecutive hidden input elements: </p> <form> <fieldset> <legend>Title</legend> <input type="hidden" name="token" value="ABC123"> <input type="hidden" name="token" value="ABC123"> <input type="text" name="username"> <input type="hidden" name="token" value="ABC123"> <input type="password" name="password"> </fieldset> </form>
So the problem is that that CSS translates to "select the first input child if it's type is not hidden", as the type is hidden, your CSS doesn't apply. 因此,问题在于CSS转换为“如果未隐藏其类型,则选择第一个输入子项”,因为该类型是隐藏的,所以CSS不适用。
What you instead need to do is make the CSS apply to all inputs which aren't hidden, then turn it off for all siblings that aren't the first (This works for me on Chrome) 相反,您需要做的是使CSS应用于所有未隐藏的输入,然后对不是第一个的所有同级关闭它(这对我在Chrome上有效)
input:not([type="hidden"]) { background: orange; } input:not([type="hidden"]) ~ input:not([type="hidden"]) { background: white; }
<form> <input type="hidden" name="token" value="ABC123"> <input type="text" name="username"> <input type="password" name="password"> </form>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.