The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Can't get rid of blue box around "input" areas in contact form

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #272847
    Sloan Bueller


    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.



    The 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 So with the border-bottom definition coming after border: none; in the stylesheet, it overrides what you’re doing to remove it.

    Sloan Bueller

    Beverly, 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. :-/


    I 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 as box-shadow, and try nulling that.


    Don’t remove the focus outline. Every contact form needs these for accessibility.


    try 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;
Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.