How to remove border (outline) around text/input boxes? (Chrome) [duplicate]


Tags: css,google-chrome,input,border

Problem :

This question already has an answer here:

Can anyone explain how to remove the orange or blue border (outline) around text/input boxes? I think it only happens on Chrome to show that the input box is active. Here's the input CSS I'm using:

input {
    background-color: transparent;
    border: 0px solid;
    height: 20px;
    width: 160px;
    color: #CCC;
}

enter image description here



Solution :

This border is used to show that the element is focused (i.e. you can type in the input or press the button with Enter). You can remove it, though:

textarea:focus, input:focus{
    outline: none;
}

You may want to add some other way for users to know what element has keyboard focus though for usability.

Chrome will also apply highlighting to other elements such as DIV's used as modals. To prevent the highlight on those and all other elements as well, you can do:

*:focus {
    outline: none;
}

    CSS Howto..

    How to move the jQueryUI close button on the dialog over the top of top right corner?

    How to hide repeated content from search engines with CSS?

    How can I change the entire background color of a page?

    How to include border-radius.htc in MVC architecture to make border-radius work in IE

    Chrome Developer Tools: How to find out what is overriding a CSS rule?

    How to use an existing source map to compile scss to css?

    How do I get the (element with the) highest CSS z-index in a document?

    How to make css smaller?

    How to override default Polymer CSS

    How do I make custom scrollbars with jScrollPane to be always visible?

    how do I select a single tag in the middle of many of the same in CSS?

    how to make text with quotations justify? [closed]

    How to give a div full height in CSS

    Beginner's stuff: How to stop CSS' Divs from overlapping?

    How to structure selectors in css when using specificity?

    How To Dark Image Background in CSS on hover?

    How to Change CSS style of the same element that is NOT Hovered

    Ruby on rails dropdown