CODEWITHSUNDEEP
htmlcssfocus
Asad Refai
Asad Refai

Reputation: 275

Focus type css while hovering on html button in IE

On a page when we tab across elements, they get focused and those elements get highlighted with some browser specific css.

Like on button when focused it shows like below screen shot.

Notice the white dotted line on button

enter image description here

I would like to show exactly similar when button is hovered

button:hover {
   /*What should go here?*/
}

Upvotes: 2

Views: 704

Answers (2)

dakab
dakab

Reputation: 5875

There’s the CSS outline property, but it won’t render inside the element. If we use a simple border for the dotted line, we nee to get some spacing between the dots and the visible border. Perhaps using box-shadow? Try this:

button{
    width:140px;
    height:36px;
    color:#FFF;
    background-color:#555;
    border:1px dotted #555;
    border-radius:2px;
    box-shadow: 0 0 0 4px #555;
}
button:hover{
    border-color:#FFF;
}

Upvotes: 0

Mathijs Rutgers
Mathijs Rutgers

Reputation: 815

Is this what you're looking for? http://jsfiddle.net/Screetop/tpx5tyxc/ As mentioned by the others, take a look at the outline property. Also the box-shadow simulates a border around your button.

<button>Submit</button>

button {
    display: block;
    background: grey;
    padding: 5px;
    border: none;
    box-shadow: 0 0 0 3px grey;
}
button:hover {
   /*What should go here?*/
    outline: 1px dotted white;
}
button:focus {
    outline: 1px dotted white;
}

Upvotes: 1

Related Questions