How to retain rectangular border around button when clicked


Tags: javascript,jquery,css

Problem :

When I select the vote button on this fiddle : http://jsfiddle.net/3Uz7S/4/

The vote image updates to an oval shape on firefox/chrome.

How can the css be updated so that when 'vote' is selected the button retains its rectangular shape or is this even possible ?

Fiddle code :

<script type="text/javascript" charset="utf-8" src="http://static.polldaddy.com/p/6343621.js"></script>

.pds-vote-button {
    border-radius:0 !important;     
    -webkit-border-radius:0 !important; 
}

.pds-box {    
border-radius:0 !important;     
-webkit-border-radius:0 !important; 
}


Solution :

apply CSS styles also to class "pds-vote-button-load" and add -moz-border-radius as well

.pds-vote-button, .pds-vote-button-load {
    border-radius: 0 !important;
    -moz-border-radius: 0 !important;
    -webkit-border-radius: 0 !important; 
}

    CSS Howto..

    How to make CSS animation not reverse after finishing? Example inside

    How to mask semi circles inside a rectangle and mask through css?

    How do you set a JavaScript onclick event to a class with css

    How to center webpage content

    How can this effect (line breaks) be achieved with CSS and/or Javascript

    How to break a line after some certain width in css

    CSS: How to say .class:last-of-type [classes, not elements!] [duplicate]

    Transition instant set border, show slowly

    How do I keep text from wrapping under an element which floats to its left?

    How can I prevent the textarea from stretching beyond his parent DIV element? (google-chrome issue only)

    How can I center a div

    cannot figure out how to make text appear inside div after hover animation

    my website not worked in Ipad and how I can fix some small issue? [closed]

    How can I set one style to override another conflicting style in CSS?

    How to represent a Grid with vertical header text in HTML?

    How to get anchor tag on background image of div?

    How can I use AngularJS directive to apply css style for a string?

    How to align in “rubber” layout with narrow screens?

    How to define a good convention for css?

    How to make a progress bar like this in CSS

    How to set the last inner div to fill the rest of the wrapper height with CSS?

    How to add multiple css gradient as a multiple background?

    How can I stop a CSS keyframe animation?

    how to create an external javascript and an external css file for date picker and how to use it in eclipse

    jqueryui dialog with table — how to limit row height

    How to make CSS/HTML prototyping faster for engineers without strong CSS skills?

    CSS: How to make link colour the same as parent div

    How to have different table styles in CSS

    How to override default tag css to normal?

    JQuery, fade out table row and contents (on scroll) in ratio to how much the row is hidden by containing div