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.
I have a label element which, along with its corresponding input type="file", also contains an img sandwiched between two span elements.
The input itself is declared as display:none, allowing the label to do the job of launching the File Upload box when any element inside it is clicked. This, of course, works swimmingly in every major browser except IE. In IE, clicking anywhere inside the label other than the img will launch the File Upload box, but clicking the img will not...
You can see this issue replicated by opening this fiddle in IE alongside any other browser.
Strangely, the issue can be isolated down to the presence of the form. For some reason when the form wrapper is removed the label functions correctly. I obviously can't use this as a solution though. Thoughts?
It is a known bug in IE you can see it in Microsoft Connect
To solve simply add pointer-events: none; to the <img>
It can cause some browsers to highlight the image when being clicked. To avoid that make the image unselectable.
The full solution is:
.selector-for-image {
pointer-events: none;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
See updated JSFiddle
In my .net project ,these are so many codes like this
< asp:TextBox ID="txtDeparment" runat="server" contentEditable="false">< /asp:TextBox>
it works well In IE,but in Chrome, it doesn't work. but you cann't simply replace it by ReadOnly.
How can I resolve this problem in minimum changes?
In order to make a text box un-editable you should use the following CSS attributes:
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
These CSS attributes don't allow selecting the element, which in the case of an input field, also denies editing it.
I require one HTML element (Label) on my page to be unselectable for IE ... currently I have tried
Unselectable=on
onselectreturn=false;
none of which is helping me out.
For Firefox and Chrome i have set the following CSS property which are working absolutely fine ... but the problem as always with the IE.
CSS properties you have set:
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
user-select: none;
is there any alternative or IE-hack?
An answer on Stack Overflow has helped me out but not for IE.
<label unselectable="on"> should work for IE in the HTML. If applying it from javascript you MUST use setAttribute: labelEl.setAttribute("unselectable","on"). labelEl.unselectable = "on" does not work (tested in IE9).
Note that the "unselectable" attribute only affects text directly inside the element, not within its children - you need to set unselectable on them also, if that's the effect you want.
In IE8 there are two ways to make an element unselectable:
1.) myElement.unselectable = "on"; // Does not work on body elements
2.) myElement.onselectstart = function (){ return false; }
Once an element is unselectable, users cannot select from within that element.
However, they are still able to select either the text or the box of the element
by dragging into it from within another element which is not unselectable.
I have tried to work around this by cancelling various events on myElement (ondragenter, oncontrolselect, onmouseenter, onselectionchange...), it didn't work.
All this applies only to IE8
Set unselectable to off and it should work.
<label unselectable="off">Something</label>
http://jsfiddle.net/sWguE/1/
This also works for me
<label onselect="return false">Something</label>
http://jsfiddle.net/sWguE/3/
I'm trying to change the color of input controls when they are disabled using the following css.
input[disabled='disabled']{
color: #666;
}
This works in most browsers, but not IE. I'm able to change any of the other style properties such as background-color, border-color, etc... just not color. Can anyone explain this?
Unfortunately if you use the disabled attribute, no matter what you try IE will just default the color of the text to Grey, with a weird white shadow...thing... yet all other styles will still work. :-/
I had the same problem for <select> elements in IE10 and found a solution that works for select elements only:
http://jsbin.com/ujapog/7/
There is a Microsoft pseudo-element that allows the text color to be modified:
select[disabled='disabled']::-ms-value {
color: #000;
}
The rule must be on it's own, because otherwise other browsers will ignore the whole rule due to syntax error. See http://msdn.microsoft.com/en-us/library/ie/hh869604(v=vs.85).aspx for other Internet Explorer only pseudo elements.
Edit: I think the rule should probably be select[disabled]::-ms-value but I don't have older IE versions in front of me to try it - re-edit this paragraph or add comment if that is an improvement.
There is no way to override styles for disable="disable" attribute. Here is my work around to fix this problem, note I am only selecting submit buttons in my case:
if ($.browser.msie) {
$("input[type='submit'][disabled='disabled']").each(function() {
$(this).removeAttr("disabled");
$(this).attr("onclick", "javascript:return false;");
});
}
example available: http://jsfiddle.net/0dr3jyLp/
I had the same problem with textarea "disabled" changing font color to gray.
I did a workaround by using "readonly" attribute instead of "disabled" attribute to textarea
with below css
textarea[readonly] {
border:none; //for optional look
background-color:#000000; //Desired Background color
color:#ffffff;// Desired text color
}
It worked for me like a charm!!, so I suggest to try this first before any other solution as it is easy to replace "disabled" with "readonly" without changing any other parts of code.
I Know it's been a while since the creation of this topic, but i created this workaround, and well... It worked for me! ( Using IE 9 )
The only consequence is that you can't select the value of the input.
Using Javascript:
if (input.addEventListener)
input.addEventListener('focus', function(){input.blur()}, true)
if (input.attachEvent)
input.attachEvent("onfocus", function(){input.blur()})
I just made the whole background a light gray color, I think it more easily/quickly convey's that the box is disabled.
input[disabled]{
background: #D4D4D4;
}
The way I solved the problem of "disabling" a control in IE w/o the ugly gray with a input control of type = checkbox was to leave it enabled and use a little javascript in the onclick event to prevent changes:
onclick='this.checked == true ? this.checked = false : this.checked = true;'
As mentioned by Wayne, and three years later still no luck w/ IE9, but...
You could try lowering the opacity using CSS, it makes it more readable and helps with the whole disabled state.
It is the solution that I found for this problem:
//if IE
inputElement.writeAttribute("unselectable", "on");
//Other browsers
inputElement.writeAttribute("disabled", "disabled");
By using this trick, you can add style sheet to your input element that works in IE and other browsers on your not-editable input box.
I mixed user1733926's and Hamid's solutions and I found an effective code for IE8, would be nice to know if it works in ie 9/10 as well (?).
<script type="text/javascript">
if ($.browser.msie) {
$("*[disabled='disabled']").each(function() {
$(this).removeAttr("disabled");
$(this).attr("unselectable", "on");
});
}
</script>
After reading this post I decided to create a input that acts similarly to a disabled input box but was "readonly".
So I've made it so it wasn't able to be selected or tabbed to, or have a mouse cursor that gave the user the idea they can change or select the value.
Tested on IE8/9, Mozzila 18, Chrome 29
<input name="UserName" class="accountInputDisabled" id="UserName" type="text" readOnly="readonly" value="" unselectable="on" tabindex="-1" onselectstart="return false;" ondragstart="return false;" onmousedown='return false;'/>
input.accountInputDisabled {
border: 1px solid #BABABA !important;
background-color: #E5E5E5 !important;
color: #000000;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-moz-user-input: disabled;
-ms-user-select: none;
cursor:not-allowed;
}
input:focus {
outline: none;
}
No need to overrride CSS use class based approach and play with events works perfectly
You can do one thing:
<button class="disabled" onmousedown="return checkDisable();">
function checkDisable() {
if ($(this).hasClass('disabled')) { return false; }
}
http://navneetnagpal.wordpress.com/2013/09/26/ie-button-text-shadow-issue-in-case-of-disabled/
Remove disabled attribute and use readonly attribute. Write required CSS for achieving the required result. This works in IE8 and IE9.
for e.g., for dark grey,
input[readonly]{
color: #333333;
}
Please check this CSS code.
input[type='button']:disabled, button:disabled
{
color:#933;
text-decoration:underline;
}
or check this URL.
http://jsfiddle.net/kheema/uK8cL/13/
The problem is solved in IE11.
If the problem still persists in IE11, check for the rendering engine IE is using.
I came across this piece of code at stackoverflow which helped me take off disable css class using javascript.
$("#textboxtest").prop("disabled", false).removeClass("k-state-disabled");
Original thread can be found at Applying k-state-disabled class to text inputs - Kendo UI
Thought I should share!
Use this css, works for IE11:
input[disabled="disabled"], select[disabled="disabled"], textarea[disabled="disabled"] {
opacity:0.99 !important;
background:black;
text-shadow:inherit;
background-color:white;
color:black
}