I have file-uploader control.
When i hover on button in Web-Kit browsers, cursor is default, while must be pointer.
I red this post The cursor:pointer property doesn't apply to file upload buttons in Webkit browsers but in my case i don't use property height. Also try solution that #Mohammed Ibrahim suggest, but it also doesn't work for me.
Here is my example : http://jsfiddle.net/q686cc7s/4/ I try to add cursor:pointer for every possible selector, but no success.
Any suggestions? Thanks.
If set display:none for input then cursor works correctly but uploader - not :)
Adding this always did it for me
input[type="file"]::-webkit-file-upload-button {
cursor: pointer;
}
Related
How can I remove the small square arround the radio button that gets displayed when the input gets focused?
I'm pretty sure this is a duplicate, but I don't know what the square is actually called and couldn't find what I'm looking for.
I tried autocomplete="off" on the input. I played arround with jQuery's preventDefault but without success.
Update:
Thanks for your responses. If anyone comes accross this question, here is the effect of appearance attached (upper pic without appearance, the one below is with appearance) with Firefox:
Just in case someone comes to the same problem.
Update with Chrome / Safari, appearance removes the input
-webkit-appearance: none; would make the radio buttons disappear in
Chrome and Safari. check jsfiddle.net/8uY6H (with Chrome)
– noted by JFK 6
Try this CSS since it is an outline:
input[type="radio"]:focus {
outline:none;
}
Try outline:0 property for the radio button on focus
input[type="radio"]:focus{
outline:0;
}
You need to set:
outline:none;
On the :focus state of the CSS class relating to the checkbox, or directly e.g.
input[type="radio"]:focus{
outline:none;
}
The crucial part is setting outline
The CSS outline property is a shorthand property for setting one or
more of the individual outline properties outline-style, outline-width
and outline-color in a single rule. In most cases the use of this
shortcut is preferable and more convenient.
However, also setting appearance may help cross platform where different browsers render checkbox elements differently.
As noted in the comments below though, this will cause the checkbox to not display in some circumstances- so you would need to produce a pure CSS solution.
The -moz-appearance CSS property is used in Gecko (Firefox) to display
an element using a platform-native styling based on the operating
system's theme.
This property is frequently used in XUL stylesheets to design custom
widgets with platform-appropriate styling. It is also used in the XBL
implementations of the widgets that ship with the Mozilla platform.
As simple as
input[type="radio"] {
outline: 0 none;
}
JSFIDDLE
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.
http://jsfiddle.net/danielcgold/SYgzJ/
When you click on the input then go on blur, artifacts are left on the screen in Chrome 15. I first noticed this issue on a site i've been developing so I eliminated everything but just the input field and a button. When I remove the button, the transition happens just fine. Any ideas?
Add this CSS to your input field:
input {
-webkit-transform: translate3d(0,0,0)
}
This will force Chrome to use your GPU to do all the rendering which will solve the artifacts problem and make your animations smother.
This is a bug in Chrome's rendering of CSS transitions. But you can workaround it by forcing element "refresh" operation. Please note that you need to refresh not the input element, but it's parent, so the following code will help you:
$(document).ready(function(){
$('#test').blur(function(){
$(this).parent().addClass('repaint');
});
$('#test').focus(function(){
$(this).parent().removeClass('repaint');
});
});
And repaint class should have something related to parent's view, for example different color:
.repaint {
color: red;
}
But you may replace color with visibility or other view-related (but not important/visible for parent) attribute.
Here is jsfiddle to demonstrate the workaround
I had a similar problem with box shadow artifacts in Safari, and found adding -webkit-transform:scale(1); to the focus rule fixed the problem.
See http://jsfiddle.net/SYgzJ/48/ – it should work fine now.
As Cesar said, -webkit-transform: translate3d(0,0,0); will fix it, but it can affect text rendering too.
I am trying to create a custom cursor using the following image:
http://anuary.com/dev/hp/pad3/public/images/hand-cursor.png
The image size must be retained. I've tried simply to use body { cursor: url('http://anuary.com/dev/hp/pad3/public/images/hand-cursor.png'); }, though that doesn't work in FF/Chrome. (not even checking other browsers)
What's the reason for it not working?
The problem is not just with your css code lacking second argument but with the image file.
If you simply resize, make it smaller (i tried 32px for testing purposes) it works like a charm.
You might also want "pointer" rather than auto, judging by the look of the image;
cursor: url('http://anuary.com/dev/hp/pad3/public/images/hand-cursor.png'), pointer;
EDIT:
i realize now you wanted to keep the size but it just won't work. see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property for more info
Firefox requires a second non-url argument such as
cursor: url('http://anuary.com/dev/hp/pad3/public/images/hand-cursor.png'), auto;
There is a great reference at Quirksmode CSS2 - Cursor Styles
The reason this is not working is maybe that you're doing this:
cursor:url(https://example.com/example.png)
You have to add , auto after the statement. Therefore, this is what you are looking for.
cursor:url(https://example.com/example.png),auto;
Here's the clippet.
button {cursor:url("data:image/x-icon;base64,AAACAAEAICAAAAAAAACoCAAAFgAAACgAAAAgAAAAQAAAAAEACAAAAAAAAAQAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAP8IAP8RAAAA/+YABP8AAAD/iAAAav8AAP+3AACi/wALCxIAAHP/APL/AAAA6v8AALv/AACV/wDQ/wAAAP8RAAD/9wAAe/8AACb/AABV/wAAAP8A/8gAAP/3AAAA+/8AAP8aAF7/AAAA/1EA/wCzAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABUcAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAVAAAAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAFQAAAA4AAAAAAAAVABgAAAAAAAAAAAAAAAAAAAAAAAAGEQAADAAJAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAABEEAAAZAAkAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABAAAAAsACQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgAJAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAVAAAcCQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABMAAAkAAAAJCQkJAAAAAAAAAAAAAAAAAAAAAAAAAAAAFAAACQAACQAAAAAAAAAcAAAAAAAAAAAAAAAAAAAAAAAKAAAACQkcAgsZDA4VABUAAAAAAAAAAAAAAAAAAAAAAA0AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHBRsBGg8WAAAEEQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABBEGFQAAAAAAAAAAAAAAAAAAAAAVAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAxAXAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP////////////////////////////////////////////////8/////H////w////cPH//zDg//8Q5P//AOD//wDx//8A////AP///wH///8DgH//AwA//wAAH/4AAB/+AAf//AAD//wAAf/4AAD/+Af///Af///wf///8f////"),auto;}
<button>Hover over me!</button>
Is this what you looked for?
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
}