Clever Geek Handbook

Why is the default css code lost when changing the background color of a button?

I noticed a very strange issue that I cannot fully understand. So I want to ask you guys for an explanation of what happens when I lose the default CSS

on a button when I change my background color to jQuery?

This is demonstrated in jsfiddle (tested on FF

and off Chrome

). If you click above the button, it loses its style, for example. without rounded borders, which is not to be expected. Could you explain why this is happening? Also, what workaround would you suggest to keep the default CSS settings?

+3


source to share


3 answers


If you set the background color of the button in css to start with, animate it back to that color in your jQuery which does the trick.

http://jsfiddle.net/899Wn/8/



button {
    background: blue;
}


$("#nav ul li button").hover(function() {
    $(this).stop().animate({
        backgroundColor: '#E5E5E5'
    }, 500);
}, function() {
    $(this).stop().animate({
        backgroundColor: 'blue'
    }, 500);
})
+1


source


You will soon start styling the form element i.e. a <href = "#" tag>, especially with background color or borders, the browser re-renders the element. Then it shows YOUR specific .css and you lose "browser + software + os". specific style.



administering controls styles and styles controls in detail

+1


source


I believe the default button on the page is a system generated button (i.e. Windows). Changing any of the visually influencing styles will cause your browser to render the button, removing certain styles. As soon as you arrive here, now is the way back. The best thing to do is style the button to look very similar, then you can change individual styles without losing the rest. Similar answer here: Chrome default button style . I'll see if I can find more information on this.

EDIT:

The second answer on this page seems to support my thoughts, although there is still no link: fooobar.com/questions/1996344 / ...

+1


source






More articles:


All Articles