how to style a selected button/link with css or javascript?

css selected
xxx12123 picture xxx12123 · Aug 11, 2011 · Viewed 42.5k times · Source

I would like to style my selected button. I would like to display a light-blue border around the image of my selected button to show which page the user is on. (or just use the same hover image as the selected button image when the button is pushed.) I didn't have success with the css link selectors :visited, :focus, or :selected. Does this require a javascript solution? thanks for any pointers!

Answer

blejzz picture blejzz · Aug 11, 2011

i usually just a extra class name called selected 

   <div class="button selected">Button 1</div> 
   <div class="button">Button 2</div>

  .selected {
      border: 1px solid #0000ff;
  }

It depends on how you display your page (using ajax or refresh on every click). If you are using javascript to load the page content than you just put an extra classname using javascript when the button is clicked.

Related questions

How to style selected option color separately from disabled option

I have a HTML dropdown select menu with first option is disabled. I would like to show that default disabled option in gray color, but once I selected another value, I would like this appear as blue. How can I …

Read More
How to horizontally center a <div>

How can I horizontally center a <div> within another <div> using CSS? <div id="outer"> <div id="inner">Foo foo</div> </div>

Read More
How do I vertically center text with CSS?

I have a <div> element which contains text and I want to align the contents of this <div> vertically center. Here is my <div> style: #box { height: 170px; width: 270px; background: #000; font-size: 48px; color: #…

Read More