Here is a portion of the HTML code I am currently testing:
<form action="#" method="post>
<input name="username" type="text" placeholder="Username" /><br />
<input name="password" type="password" placeholder="Password" /><br />
<input name="emailAddress" type="email" placeholder="Email Address" /><br />
<input type="submit" value="Submit" />
</form>
And here is an excerpt from the CSS code I am using for this test:
form {
width:300px;
overflow:auto;
margin:20px 0 0;
padding:0;
}
/*-Inputs-*/
form input[type=text]:focus, form input[type=password]:focus {outline:0;}
form input {
width:calc(100% - 22px);
margin:0;
padding:10px;
background:#FFF;
border:none;
border-left:solid 1px #CCC;
border-right:solid 1px #CCC;
}
form input:first-child {
border-top-left-radius:5px;
border-top-right-radius:5px;
border-top:solid 1px #CCC;
}
form input:last-child {
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
border-top:none;
border-bottom:solid 1px #CCC;
}
Can the form input:last-child selector be modified to exclude the [type=submit] element?
This way, the CSS would recognize [type=email] as the last child instead?
Note: While the layout may vary, there will always be a submit button in my forms that I want the :last-child selector to ignore.