You gave me the custom css below to add a focus outline on my contact form which works. The only thing I noticed is that when you zoom in (see image) you can see that it adds the focus outline around the existing outline of the form instead of over the border. Is there a way to modify the css or add different css so that the focus outline overlaps the border of the actual contact form because I don’t really like how this looks, especially on retina devices. Or maybe hide the existing border when a field is selected with the focus border? Thanks!
#top input[type="text"]:focus, #top input[type="password"]:focus, #top input[type="email"]:focus, #top input[type="number"]:focus, #top input[type="url"]:focus, #top input[type="tel"]:focus, #top input[type="search"]:focus, #top textarea:focus, select:focus {
box-shadow: 0px 0px 1px 1px #188ece!important;
}
Hi djshortkut!
You can convert the box-shadow to border instead
#top input[type="text"]:focus, #top input[type="password"]:focus, #top input[type="email"]:focus, #top input[type="number"]:focus, #top input[type="url"]:focus, #top input[type="tel"]:focus, #top input[type="search"]:focus, #top textarea:focus, select:focus {
border: 1px solid #000;
}
IS that better?
Let us know
Best regards,
Basilis
Thanks Basilis, that’s exactly what I was looking for! You can close this ticket.
Hi,
Thanks for the feedback and glad we could help :-)
Please open a new thread if you should have any further questions or problems.
Best regards,
Rikard