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 achieve pages like a math notebook in css?

    How to document a webpage HTML and CSS using comments [closed]

    How to setup CSS for multiple font choices? [closed]

    How can I get the seletced filename from file button?

    How to override the computed style in css?

    How to draw a lens like circle on mouseover

    How to keep an image and text (vmax font) aligned when resizing browser?

    css hover : aligning on bottom: how to align on top?

    How do I submit suggestions to the CSS spec? [closed]

    How do I move this scrolling bar closer to the post area?

    How can I force an image to display in its entirety with CSS?

    css navbar how to make the text in navbar padding from top without increasing the height of the navbar

    How can I add fixed background just to this section? [demo included]

    How would i change the colour dynamically depending on the width

    How can I center a div

    How to show/hide div on click with stricly HTML/CSS

    How to detect CSS is turned off with PHP?

    How to make equal space between boxes in one row via CSS

    How to make shapes with CSS which have borders?

    How to CSS select all cells with colspan set?

    How to turn this menu into a MultiLevel one?

    How would I set this up? [closed]

    How Can I Make An Odd Shaped Icon into a “Circle”?

    How do I remove the gap between div tags?

    how to css for data attribute [duplicate]

    How to Vertically Center 2 anchor tags with CSS?

    How to get a small div bar to slide down a menu on mouseover

    How do I change the background on mouse over immediately?

    How to bind click event on image added using CSS 'background-image' property in jQuery

    How to know that a time consuming CSS operation (rendering) has completed