0

Issue with background color of a button after visited state

https://jsfiddle.net/vivekraj_kr/wxokhpy4/

how to get a background color on button visited

<button type="button" class="size_btn">S</button>
<button type="button" class="size_btn">M</button>
<button type="button" class="size_btn">L</button>
<button type="button" class="size_btn">XL</button>



.size_btn {
height:27px;
width: 27px;
background: none;
border: solid 1px #ccc;
}

.size_btn:visited {
background-color: #479c3d;
}
Vivekraj K R
  • 2,418
  • 2
  • 19
  • 38

3 Answers3

1

Try working with <a> because <button> has nothing to do with :visited

a.button {
    height:27px;
    width: 27px;
    background: none;
    border: solid 1px #ccc;
    padding: 5px 8px;
    text-decoration: none;
    color: #444;
    font: 80% Arial, sans-serif;
    outline: none;
    background-color: white;
}

a.button:visited {
     background-color: red;   
}
<a href="#" class="button">S</a>
<a href="#" class="button">M</a>
<a href="#" class="button">L</a>
<a href="#" class="button">XL</a>

JSFiddle

Note: Google Chrome has an issue setting a:visited property. Check out more here and here.

Hope that helps.

Community
  • 1
  • 1
balintpekker
  • 1,804
  • 4
  • 28
  • 42
  • @VIVEKRAJ You can also add a class to the selected button, and style it like you want. However I would use JavaScript/jQuery for that. – balintpekker Feb 12 '15 at 07:29
1

In css :visited selector used only for links elements. So instead of :visited you either use :active selector instead.

A.D.
  • 2,352
  • 2
  • 15
  • 25
0

You can try this:- S M L XL

<style>



.size_btn {
    height:27px;
    width: 27px;
    background: none;
    border: solid 1px #ccc;
}
/* unvisited link */
.size_btn:link {
    background-color: green;
}

/* visited link */
.size_btn:visited {
    background-color: green;
}

/* mouse over link */
.size_btn:hover {
    background-color: red;
}

/* selected link */
.size_btn:active {
    background-color: yellow;
} 
</style>
A.D.
  • 2,352
  • 2
  • 15
  • 25