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 override cloudmade maps css with your own css? [closed]

    How do I add a Css file to my Class library?

    How to highlight anchor link when target div comes in view - jQuery

    How can I vertically align this navigation bar?

    How to get Width of html control (in pixel ) from charaters contained by that control

    How to add border for html tr

    CSS How to generate this Shape on a Div or on Canvas

    Getting unordered list in front of image slide-show in IE8, IE7 and probably IE6

    How to chose which CSS rule to use from multiple style sheets

    How to make menu to slide right on click using HTML and CSS?

    How to display sub menu horizontally?

    How do I turn CSS into example HTML? Is there a shortcut to understanding affects of CSS on nested HTML tags?

    How to make a new DOM element to think it resides in a different domain with js and css

    how to replace text with image in html/css

    How to fit a dynamic PHP form in a div (to be able to fit fullpage.js)?

    how to make nested flexboxes work

    grayscale - how to disable it automatically

    I have a link icon next to each link. How do I exclude the link icon from images?

    how to display only 100 rows of 1000 from a database with options to go to next 100 and previous 100 in html/php/css/js [closed]

    How to make an image hover over another?

    How to know values of all attributes and properties of a tag element in HTML

    How To Place Buttons Around A Circle with HTML5 and CSS 3?

    How to get background img to show up in :after selector?

    How to reset CSS in inline? [closed]

    How to set a css class of the widget type with Symfony2

    jquery .show() hides immediately

    How to position SVG with CSS?

    How refresh the style of an HTML element after changing it using Javascript?

    How To Avoid Certain CSS coding/commands From Overriding Existing Customisations

    How can I get these two form fields to fill the space between them [duplicate]