Search the Community
Showing results for tags 'compatibility'.
-
Hi! I'm new to W3C School forum, even if I read meny things about CSS in the main website. I'm trying to customize checkbox and radio inputs... I read many tutorials concerning input customization and I successfully customized buttons, password, text, etc and select, textbox, etc... My problem is the compatibility with browsers. I'm trying to develop a web-app (asp.net) in which I customized everything. Checkbox and Radio buttons are my "bĂȘte noire": I can't make them run on FireFox and iExplorer. I choose the "sprite" method, avoiding the use of labels, because my web-app can't use labels. So, this is the CSS code I'm currently using: input[type='checkbox'], input[type='radio']{ background-image: url('http://s28.postimg.org/oggskkn6x/controls.png'); background-repeat: no-repeat; width: 16px; height: 16px; margin: 0; padding: 0; -moz-appearance: none; /* not working */ -webkit-appearance: none; -ms-appearance: none; /*not working */ -o-appearance: none; appearance: none;}/* not checked */input[type='radio']{background-position: -32px 0; }/* checked */input[type='radio']:checked { background-position: -48px 0;}input[type='checkbox']:checked { background-position: -16px 0; }input[type='checkbox']:hover:checked, input[type='checkbox']:focus:checked { background-position: -16px -16px; }input[type='radio']:hover:checked,input[type='radio']:focus:checked { background-position: -48px -16px; }/* focus */input[type='checkbox']:hover,input[type='checkbox']:focus { background-position: 0 -16px; }input[type='radio']:hover,input[type='radio']:focus { background-position: -32px -16px; }/* active */input[type='checkbox']:active { background-position: 0 -48px; }input[type='radio']:active { background-position: -32px -48px; }input[type='checkbox']:active:checked { background-position: -16px -48px; }input[type='radio']:active:checked { background-position: -48px -48px; }/* disabled */input[type='checkbox']:disabled { background-position: 0 -32px; }input[type='radio']:disabled { background-position: -32px -32px; }input[type='checkbox']:disabled:checked { background-position: -16px -32px; }input[type='radio']:disabled:checked{ background-position: -48px -32px; }input[type='checkbox']:hover:disabled,input[type='checkbox']:focus:disabled { background-position: 0 -32px; }input[type='radio']:hover:disabled ,input[type='radio']:focus:disabled { background-position: -32px -32px; }input[type='checkbox']:hover:disabled:checked ,input[type='checkbox']:focus:disabled:checked { background-position: -16px -32px; }input[type='radio']:hover:disabled:checked,input[type='radio']:focus:disabled:checked { background-position: -48px -32px; } Here, a JSFiddle in order to have a look on how it works: http://jsfiddle.net/Kztwn/5/ If you open it on Opera, Safari or Chrome everything works great (as expected) but, if you use iExplorer (v. 10/11) or Firefox...not! How can I make it work on Firefox, without lables and java? Just to summarize, this is the result I obtain on iExplorer (IE), FireFox (FF), Opera (O), Chrome ( C), and Safari (S): I can accept IE isn't working, but FireFox...how can I hide the default input style? Any ideas? Can anyone help me in finding the right solution? Thanks in advance! Nick
- 8 replies
-
- input
- customization
-
(and 1 more)
Tagged with:
-
I'm trying to work with SVGs but I'm pretty sure there's going to be some people using the old browsers that don't do this, so I'm looking into installing some kind of a fallback. Is there some way I can do this? Maybe make a DIV with the PNG for the background and containing the SVG?
-
Need expert help, Javascript is same as example, but has error in IE, works perfect in chrome/firefox. Jquery spectrum() colorpicker The example works perfect in Internet explorer, here: http://jsfiddle.net/bgrins/ctkY3/ Then on my test site, using the exact same css+js files it will not work on my site in IE: http://xekon.byethost7.com/ I have even simplified the example a bit. I cannot tell what the problem is, but I would certainly appreciate any help. I inspected the source at jsfiddle but did not see anything being done differently. edit: Also I am using windows 7, latest updates, Internet Explorer 9.0.8112.16421I have also tried from windows XP sp3, latest updates, Internet Explorer 8.0.6001.18702
-
I'm having issues with a list displaying properly, or at least how I'd like it to, in IE. It shows up like so in Firefox and Safari: With IE, the circles around the list items are squares. Does anyone have a fix for this? Here is the CSS for the list: .circlemenu{width: 100%;overflow:hidden;margin: 1.2em 0em} .circlemenu ul{margin: 0;padding: 0;font: bold 14px Geneva, Arial, Helvetica, sans-serif;list-style-type: none;text-align: left; /* "left", "center", or "right" align menu */margin: 0em 0em 0em 10em} .circlemenu li{display: inline;} .circlemenu li a{display:inline-block;text-align:center;text-decoration: none;border: solid 1pt #555555;color: #555555 ;margin: 0;margin-right:6em; /*right spacing between each link */width: 6em;height: 6em;border-radius: 4em; /*really large border radius to create round borders*/-moz-border-radius: 4em;-webkit-border-radius: 4em;} .circlemenu a span{position:relative;top:40%;} .circlemenu li a:visited{color: white;} .circlemenu a:hover{border: solid 1pt #CC0000;color: #CC0000;}
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><script>window.onload = function(){ document.getElementById("txt").onkeypress = function(evt){ var evt = (evt) ? evt : ( (event) ? event : null ) ; var elem = (evt.target) ? evt.target : ( (evt.srcElement) ? evt.srcElement : null ) ; if((evt.keyCode == 13) && (elem.type == "text")) { document.getElementById("t").focus(); return false; }}}function c(){alert(document.getElementById("txt").value);}</script></head><body><form name="form" id="form" onchange="c();"><input id="t" type="input" value="t"/><input id="txt" type="input" value=""/><input id="t2" type="input" value="t2"/></form></body></html> The onChange event is only fired in IE9, not IE7 or IE8.