I'm using the meter element to display a star rating from 0 - 5. I got it to work great on Chrome, sort of okay in Firefox, but can't quite get it to work properly in Safari.
Here is a codepen
For Safari, to properly display the styled meter, I have to add
meter {
-webkit-appearance: none;
}
And then everything works. However, once doing that, it ceases to work in Chrome because Chrome will just render the content within the meter and cease to show it completely. Has anyone gotten around this?
P.S. Also, does anyone know why I can't set it like this:
&::-webkit-meter-bar,
&::-webkit-meter-optimum-value,
&::-moz-meter-bar {
//code here
}
And instead have to break it up?
&::-webkit-meter-bar,
&::-webkit-meter-optimum-value {
//code here
}
&::-moz-meter-bar {
// code here
}
Much appreciated if anyone has any insight :)
I can not test on Safari
But I would try the following (It works in Chrome, at least)
meter {
-webkit-appearance: none;
-webkit-appearance: meter;
}
Chrome has a built-in style of meter.
That's why when you set none it stops to work. Hopefully, Safari will understand none, won't understand meter and will keep the first style.
I have gone with a hacky way to target only Safari. This allows my styled meter to work across Firefox, Safari and Chrome. Have not managed to figure out why I need to separate the -webkit and -moz styles. Perhaps in the future when all the browsers implement the element in the same way things will be better.
#media only screen and (-webkit-min-device-pixel-ratio: 1) {
meter:not(:root:root) {
appearance: none;
}
}
I had the same issue and this worked for me:
-webkit-appearance: meter;
-moz-appearance: none;
appearance: none;
If you set border-color: transparent for the meter element it works in Safari, don’t ask me why.
Here is a working Codepen for your example:
https://codepen.io/receter/pen/KKQmBLP
Edit: border: 0; works as well and is probably better.
Related
I'm working on a contact form where the select inputs are designed to have white text on a black background. The desired styles are being applied correctly in every instance except when accessed via Safari or Firefox on either an iPhone or iPad.
The relevant CSS Script is as follows:
select{
-webkit-appearance: none;
color: white !important;
}
Is there a particular reason that these browsers may not be processing this style? And how would I circumnavigate it?
*edited as both Firefox and Safari express this same issue
This type of styling is not currently supported by WebKit browsers on Mac OS X. You may find some more ideas here: Pure CSS solution to styling specific options in Webkit based browsers?.
Have you tried styling the option?
select option {
color: white;
}
Customized select dropdown background image is not working in lastest version of Firefox 30 but other browsers it's working fine(Chrome, Opera, IE11, Safari).
Below styles were working fine with Firefox 21 to 29 but in Firefox 30 its not working.
select {
background: url(dropdown_arw.png) no-repeat right center;
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
width: 90px;
text-indent: 0.01px;
text-overflow: "";
}
sample page -
http://kvijayanand.in/jquery-plugin/test.html
It may be that firefox and other browsers do not support a background images for select lists. I have tried to put a background for a select list in the past but it only works in some browsers. This is my best guess. You could try googling it if you already haven't.
Known bug since 2011...
Mozilla Official - BUGZILLA
I'm scared that you cannot simply do that via CSS. You should check something like jQueryUI
It seems that the contenteditable attribute (which worked fine on iOS6) has stopped working on iOS7 webkit. Though the browser seems to recognize the field as editable, and brings up the keyboard, any input seems to close it, or it fails to register. Any encounter the same problem, or have any workarounds?
You can try it out over here - http://html5demos.com/contenteditable
Thanks!
I ran into this problem today. The solution for me was to set user-select to "text" in the CSS for any editable elements:
* {
-webkit-user-select: none;
user-select: none;
}
input,
textarea,
[contenteditable] {
-webkit-user-select: text;
user-select: text;
}
I was having the same issue and the below link helped me resolve it.
https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-SW1
The solution that worked for me was to set "-webkit-user-modify" property to "read-write" for any editable element (you have defined as contenteditable)
*{
-webkit-user-modify:read-write;
}
I have styled my select boxes, but i can still see the arrow in my select box in firefox, i have set css so:
background:transparent;
content:'';
apperiance:none;
Thats work on Chrome, but on Firefox i still see default arrow, is possible to delete it also on Firefox?
This should remove the arrow in selects in Chrome, Firefox, Safari, and IE10.
.poa-select {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
text-indent: .01px;
text-overflow: "";
}
.poa-select::-ms-expand {
display: none;
}
Ideas taken from here and here.
Unfortunately there isn't yet a cross-browser compatible route of styling form elements with CSS: it's not usually left to the designer to have control over their appearance/behaviour so form elements are notoriously difficult to style. Many browsers specifically do not allow you to style them at all!
If you need to get a consistent look across all browsers, the only route is to use JavaScript to replace the form element in-view with stylised HTML elements.
Here's an article that lists a few of the options available for you: http://www.jquery4u.com/plugins/10-jquery-selectboxdrop-down-plugins/
The trick that works for me is to make select width more than 100% and apply overflow:hidden
select {
overflow:hidden;
width: 120%;
}
The answer from here : How to remove the arrow from a tag in Firefox
Use the pointer-events property.
The idea here is to overlay an element over the native drop down arrow (to create our custom one) and then disallow pointer events on it. [see this post]
Here is a working FIDDLE using this method.
Also, in this SO answer I discussed this and another method in greater detail.
For my website I have such code:
html {
cursor: url(cursor.cur), progress !important;
}
obviously in a style rule. How do I do a rule which has a similar effect to the following one:
a:hover {
cursor: url(cursor.cur), progress !important;
}
but which actually works. It seemed to work in Safari, but it didn't work in Chrome 17.0.963.78 for Mac.
It works for me in Chrome 19.0.1061.1.dev on Mac. So it's possibly a bug in 17.0.963.78.
http://jsfiddle.net/q2yZg/ that I used for tests.