I know this will be marked as a duplicate but every suggested CSS fix out there is not working for me in IE 11.
I am trying to disable an input clear 'X' in IE 11.
Among numerous others I have tried:
input::-ms-clear {
display: none;
height: 0;
width: 0;
}
or, if anyone can tell me how to get that to work that would also be acceptable, but I would rather have it gone altogether.
(adding my comment from above as an answer since it turned out this was the cause of OP's issue)
Your CSS is fine:
input::-ms-clear {
display: none;
height: 0;
width: 0;
}
<input type="text" />
There is no way to hide the X if the browser is running in Modern UI ("Metro") mode or if the page is rendering in Compatibility Mode.
So triple check that there's nothing in your markup that would cause the browser to use compatibility mode. If your users are using the Modern UI for some reason, there's not much you can do about that.
This works for me in IE 11 (IE 11 Document Mode)
::-ms-clear {
display:none;
}
It's slightly different than your selector which includes input. I don't see why that should make a difference, but you should try the selector as I have it (without any tag prefix).
Related
I know this may seems duplicate question but I still not get clear idea about the clear button in firefox and up/down arrows in chrome. It occupies more space in my table. I want to remove those functions. I really don't know is there any function in javascript or in CSS
I tried this:
input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-calendar-picker-indicator {
display: none;
-webkit-appearance: none;
}
but, still getting the same X mark.
In Chrome you can use
input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-clear-button { display: none; }
Firefox, on the other hand, doesn't have support for this.
You'd probably be better off using a 3rd party jQuery plugin.
I use jQuery Selectric plugin for customize select's.
$('select').selectric({
disableOnMobile: false
});
If i open select on iPad device my left column move up
.left-column {
position: fixed;
left: 0;
top: 0;
width: 200px;
height: 100vh;
background: #F00;
z-index: 100;
}
Please, help with it. Demo here: http://output.jsbin.com/seleyi
UPD: test at browserstack iOS < 7 - no problem, iOS 8.3 - have some problem, iOS 9.1 have this bug
It's bug iOS 9, include in iOS 8, but in 9 version include partly.
Bug with input, with attribute readonly="readonly". Selectric use hide input:
What happen:
If click on selectric-wrapper start method _open.
Method _open set focus on hide input.selectric-input. It make selectric plugin and i don't know why. May be, more simple add listeners for keystrokes on a hidden element. And handle such events when an item has focus. Why input? If you use another element, then pressing the arrow keys, we will also scroll the document itself. Because, use input , although I could be wrong. Maybe better input for e-readers, ie, used it to enhance accessibility.
And when focus comes to input , despite the fact that it is readonly, iOS (I think so) tries to allocate space for the keyboard. I can advise a simple workaround:
$(".selectric-input[readonly]").on("focus", function(evt) {
this.blur();
});
Ie when the focus input immediately rid of him, because on iPads impossible to move through the list using the keyboard, the functionality should not be compromised.
For the next project my team is working on, we have an ASP.NET/HTML 4 project that we're (slowly) upgrading to MVC 4.0/HTML 5. It is a requirement that this setup work on IE 9, but we can't yet fully upgrade to HTML 5 for a number of reasons.
The problem I am trying to solve involves the simple task of toggling a callout, based on the jQuery :hidden selector. While it is possible to get the callout to appear, getting it to hide is causing me some trouble.
We have an MVC partial with the following markup:
<link rel='stylesheet' href='my-styles.css' />
<h4>Information</h4>
<div>
#Html.LabelFor(m => m.PersonName, "Person's Name")
#Html.InputFor(m => m.PersonName)
<a href='#' id='info-link'>[ ! ]</a>
</div>
<div id='info-callout' class='callout hidden'>
<div class='callout-before'></div><div class='callout-main'>
This is the name of the person this form refers to.
</div>
</div>
<script src='this-form.js'></script>
...and inside of this-form.js:
var MyTeamCallout = function($control, $callout) {
var pub = {};
pub.$control = $control;
pub.$callout = $callout;
pub.RegisterClickEvent = function () {
pub.$control.click(function () {
e.preventDefault();
e.stopPropagation();
// Repositioning of the control removed for purposes of this post.
if(pub.$callout.is(':hidden')) {
pub.$callout.show();
}
else {
pub.$callout.hide();
}
});
}
return pub;
};
// --- Functional Code... -----------------------------------
var $link = $('#info-link'),
$callout = $('#info-callout');
$(document).ready(function () {
var calloutObject = new MyTeamCallout($link, $callout);
calloutObject.RegisterClickEvent();
});
...Finally, with the given CSS:
.hidden {
display: none;
}
.callout {
position: absolute;
z-index: 2;
/* Left/Top assigned by JavaScript, normally */
}
.callout-before {
position: absolute;
top: 0.5em;
left: -1em;
/* SNIP: Borders are used to create a CSS triangle. */
}
.callout-main
{
position: absolute;
top: 0;
width: 10em;
}
When I run this in IE9, I can cause the callout to appear, but not to hide again. I am showing no JavaScript errors in F12 Developer Tools.
Questions:
A) Are there known compatibility issues with the :hidden selector in IE9 Quirks Mode?
B) If so, what would be a better vehicle to overcome these limitations?*
*: The problem in question is a little more complex than I've posted here, but our current solution uses the :hidden selector. I'm trying to preserve that if at all possible.
jQuery does not support Quirks mode. The lowest browser they support (or have ever supported) is IE6 in Standards mode.
So the fact that something has broken is not a surprise; in fact, if anything in jQuery works in Quirks mode, you should consider it lucky.
I strongly recommend trying to bring the site into standards mode as soon as possible by adding a doctype. This doesn't necessarily mean you have to go all HTML5, but you should consider at least making the minimal switch to standards mode to be a priority.
If you're worried about your layout breaking in standards mode, try adding
* {box-sizing:border-box;}
to the top of your CSS file; this will set the standards mode box model to emulate quirks mode, and will mitigate a large portion of the layout glitches that occur due to the switch.
Hope that helps.
I don't see any documentation about it, but I doubt that :hidden works in QuirksMode as a psuedo selector. You probably need to instead make a direct comparison against the visibility / display state / opacity of the element.
Is it possible to detect CSS support by using Javascript?
For example, is it possible to detect if the browser supports attribute selectors like this?
input[type='text'] { }
Modernizr is designed to detect browser features and may well be able to help in this instance.
http://www.modernizr.com/
This is a bit speculative as I haven't tested it out, but I believe it would be possible via JS to add a style element followed by an element that it has an effect on, and then test the values:
Speculative untested code, may or may not work (jQuery used for brevity):
$('<style type="text/css" id="foo">input[type="text"]{ width: 10px; }</style>').appendTo('head');
$('<input type="text" id="bar">').appendTo('body');
if ($('#bar').width() == 10)
{
//attr selector supported
}
$('#foo, #bar').remove();
document.querySelectorAll("input[type='text']")
But that fails for older browsers, naturally.
Other than that, you could just use the style property to check if a certain CSS property has been applied or not.
input[type='text'] {
background-repeat: no-repeat; /* or any other irrelevant, non-default value */
}
and
if (myInputElem.style.backgroundRepeat == "no-repeat") {
// selector is supported
}
I am trying to make the ugly grey border that appears around anchor tags go away. The CSS property outline:none; works for Firefox, but how can I do it in IE? Preferably using CSS expressions or jQuery. I'm not worried about accessibility BTW.
Based on your suggestions I found these to be the best solutions:
The jQuery (for IE browsers):
$('a').focus(function() {
$(this).blur();
});
Another jQuery option (for IE browsers only):
$('a').focus(function() {
$(this).attr("hideFocus", "hidefocus");
});
The CSS (for all other browsers that force an outline):
a {
outline: none;
}
Note: Some browsers such as Google Chrome don't force an outline on focus.
Unfortunately I think hideFocus is your best answer as blur isn't always appropriate:
...
http://msdn.microsoft.com/en-us/library/ms533783(VS.85).aspx
It sounds like you're talking about the dotted border that appears when you tab through links. You have the correct solution for Firefox (outline: none in the CSS). The best solution I've used for IE is to add an onfocus listener that removes focus:
link
Take a look at this site for an example of how you might do it globally: http://codylindley.com/Javascript/223/hiding-the-browsers-focus-borders-should-i-shouldnt-i
Unless I'm missing which dotted border is being discussed, outline:none works in Internet Explorer 8 (at least, for me). Rather all of a sudden some hyperlinks were rendering with a dotted border (the only attribute I remember changing is display:inline on an h2 element that contained a link, afterwards the dotted border appeared). So I threw in a { outline:none; } in my global stylesheet and poof, no more border in IE8!
For IE, you can use Javascript like this:
Click Here
Read more:
http://www.htmlgoodies.com/beyond/javascript/article.php/3471171
For Firefox and Safari, outline:none works.
Read more:
http://css-tricks.com/removing-the-dotted-outline/
Does this not work?
a
{
border: 0;
}
a {outline:noneIE 8} css seems to work well on Firefox, Chrome and IE 8.
a {
outline: 0 none !important;
border: none;
}