Here's a quick demo, Safari only. http://jsfiddle.net/2late2die/8AJnD/
If you remove the perspective style, all checkboxes appear normal. Using -webkit-transform-style:preserve-3d does the same thing (i.e. checkboxes disappear). Seems to apply to radio boxes as well but not input elements.
Most likely this is a bug in Safari but I just wanted to confirm that there are no solutions to this.
Yes it is a bug in safari. Chrosme does not even support it yet.
here is an example that works in safari: http://www.webkit.org/blog-files/3d-transforms/perspective-by-example.html
This means that it is really the inputs that break the page. try to submit the bug to apple :)
Here is the same page with 2 inputs added to it: http://jsfiddle.net/8AJnD/17/
as you see they do not show.
Related
Some people want to make the -ms-clear pseudo element disappear: Remove IE10's "clear field" X button on certain inputs?
My need is the opposite: I need to have it on FireFox and Chrome too. My client noticed it in Internet Explorer and founded it very useful. I use jquery-inputmask plugin BTW in my app.
https://github.com/RobinHerbots/jquery.inputmask/issues/1172
Addition to the answer:
I just double checked how DataTables's column filters handle this, because I remembered that it provides clear icon on FF and Chrome. I tried it out now in IE, and the IE's pseudo element puts an extra X there! The pseudo element is the bigger one, and the smaller one which is there in FF and Chrome also is a background image justified to the right with a right margin of 5px.
That is a native feature that is shipped with IE10. In order to have something like that in other browsers you will need to create it yourself. Or find a library that has a feature like that.
I ran into a problem that is not supposed to happen (which is why I'm puzzled): on THIS page, the first item of the left side navigation menu has 2 chained classes attached - one for specific formatting as the first item and the other to show the active state. Everything is fine in standard compliant browsers, but the active state is missing in old IE versions, including IE8.
That is especially annoying since IE8 is supposed to support multiple/chained CSS classes (as mentioned in this fine article.)
Can anyone give me a hand with this please? Thank you!
make sure that when in IE, the document mode is "standardds" and not "quirks"
Ok maybe it's not the solution, but at least try to add !important; to your active links.
Clicking directly under or above the text on this button fails to register as a click in Chrome/Safari (might take a couple tries to find the sweet spot, but it's consistent enough to be irritating). The :active CSS gets applied, so it's clearly a bug. Anyone have a workaround for this??
http://jsfiddle.net/BpR76/
This guy seems to have had the same problem but I don't agree with the answer - it's not a dragging issue.
After months of working correctly, the large version of the Facebook Like button has stopped displaying the number of "Likes". The compact version works correctly, but the big button hides the number. I am on a Mac, and the buggy behavior is consistent on Chrome, Firefox and Safari. You can see the big buttons NOT working on JoomlaDigger.com, and you can see all the small buttons working correctly on each article view.
After digging into the markup, the div with class "connect_widget_number_cloud" has element style "visibility:hidden". Very strange, since the markup does NOT show this CSS style, but Chrome CSS Inspector shows the element style.
This bug appeared on September 1st, 2011. Can anybody from Facebook comment on this?
It is also currently broken on Facebooks own page. And the bug has already been filed.
Is there any way, how to make rounded HTML <select>, without using any javascript?
I have this insane design and I have absolutely no idea how to do it only with CSS.
The same problem is with checkbox and radiobutton. Does anybody know how to make them rounded?
I need solution that works for IE6+, Firefox 2+, Opera 9+ ...
alt text http://uploader.chytry.cz/select-checkbox.png
No. Form styling is very problematic, there are no guarantees that any styling will work. Simple borders and background colours/images generally work OK in most browsers. I believe Safari will let you style very little. Check this page for more detailed info.
Honestly, the best solution is to use javascript. jQuery click menu is a great solution I used recently to mimic a select box (used JS to set a value on a hidden field when an element in the menu was selected).
I'm sure there are other solutions around too if you search.
No.
Now the long answer: Internet Explorer does not lend itself well to being styled. You will be able to set a background image for the left-hand side (the text content) that has rounded corners, but the drop-down arrow will be fixed as the default browser. You'll also find that the mousedown and mouseover states for the control will be fixed as the default style.
I think that in many cases, the ideal preferred design needs to be a little pragmatic about limitations in browser standards support. Specifically, the problem that IE6 doesn't support a fair number and IE7 is only slightly more compliant.
Sorry for the bad news.
no
please see this site for radiobutton and checkbox
http://www.maratz.com/blog/archives/2006/06/11/fancy-checkboxes-and-radio-buttons/
No, Whit out javascript or jQuery you can not do this. But if you need with jQuery try this link. It contains the HTML select box with rounded corners by jQuery.
http://webworld-develop.blogspot.com/2011/11/cool-html-5-select-with-jquery-and-css.html