css input required not focused or disabled

Question

I'm trying to create a css rule to change the background color of an input if it is required, but bot disabled or in focus

I have this, but it's not working obviously!

<input type="tel" class="form-control" placeholder="Phone" name="phone" value="" required>

and css:

input:not(disabled):not(focus):required {
    background-color: rgba(255,0,0,.10)
}

Answer 1

Use the : for your pseudo-selectors :disabled and :focus

input:required:not(:disabled):not(:focus)