- This topic is empty.
-
AuthorPosts
-
June 19, 2018 at 12:59 pm #272847Sloan BuellerParticipant
Hello,
I am new to CSS and I’m having trouble removing a blue box from the border of text boxes in a contact form. I followed a tutorial, and it doesn’t seem to be a problem in his tutorial, but it is for me. I created a codepen below that shows the issue. I have set the style to border:none and outline:none for all states (hover, focus, active, visited), but it still does it. I am NOT talking about the bottom border on each box! This issue with the unwanted blue border appears around the entire box and is there even when border bottom is removed. To see the issue you need to click into any box of the contact form. I would be grateful for any feedback. Thanks.
Codepen: https://codepen.io/anon/pen/gKvwdw
June 19, 2018 at 1:22 pm #272848BeverleyhParticipantThe border along the bottom? That’s down to this;
border: none; ... border-bottom: 1px solid #a8a8a8;
They’re the longhand and shorthand versions of the same property https://www.hongkiat.com/blog/css-shorthand-longhand-notations/ So with the
border-bottom
definition coming afterborder: none;
in the stylesheet, it overrides what you’re doing to remove it.June 19, 2018 at 1:33 pm #272849Sloan BuellerParticipantBeverly, thank you for your reply, but you completely misunderstood my post.
I am NOT talking about the border on the bottom. I am talking about the dark blue border that appears around the ENTIRE box, not just the bottom. It’s only there when a specific box is highlighted (as to type in text).
Having the border bottom property does nothing to change this. Try deleting it for yourself and you will see the blue box is still there. :-/
June 19, 2018 at 2:10 pm #272856BeverleyhParticipantI don’t see it but I’m on mobile. It sounds like you’re talking about the :focus
outline
that’s there for accessibility. I wouldn’t recommend removing it but you can try adding!important
. If that doesn’t work, have a look in the developer console (F12) for other CSS properties that might be faking a border, such asbox-shadow
, and try nulling that.June 19, 2018 at 2:49 pm #272866tomnoble92ParticipantDon’t remove the focus outline. Every contact form needs these for accessibility.
June 20, 2018 at 5:51 am #272901chris_2080Participanttry something like this
.form-control:hover, .form-control:active, .form-control:focus{ box-shadow: none !important; -moz-box-shadow: none !important; -webkit-box-shadow: none !important; }
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.