Below is the html code I am working with:
<div class='input-group has-danger'>
<input class='form-control' placeholder='first name'> // first name
</div>
<div>
<input class='form-control' placeholder='last name'> // last name
</div>
In addition, here is the CSS code I have:
.input-group:not(.has-danger):not(.has-success) .form-control:focus{
border-color: #000;
}
I want to make a change using only CSS without altering the HTML. The issue lies in selecting the last name input field. Both inputs are enclosed within div elements, but only the div containing the first name input has the class .input-group. My goal is to change the border color of the inputs to #000 upon focusing. However, the current CSS code does not affect the last name input.
I attempted to modify the CSS code as follows:
.input-group:not(.has-danger):not(.has-success) .form-control:focus,
.form-control:focus{
border-color: #000;
}
This modification successfully affects both inputs, but it also changes the border color of inputs with the classes .has-danger and .has-success, which is undesired. Despite trying to exclude these classes using :not(), the first name input still gets affected.
If anyone knows a better solution using CSS only, please advise. Thank you.