Forums

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
    Posts
  • #272847
    Sloan Bueller
    Participant

    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

    #272848
    Beverleyh
    Participant

    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 https://www.hongkiat.com/blog/css-shorthand-longhand-notations/ So with the border-bottom definition coming after border: none; in the stylesheet, it overrides what you’re doing to remove it.

    #272849
    Sloan Bueller
    Participant

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

    #272856
    Beverleyh
    Participant

    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.

    #272866
    tomnoble92
    Participant

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

    #272901
    chris_2080
    Participant

    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.