I know it sounds wired. Currently I have multiple checkboxs I want to make it looks like radio button
following CSS not working in IE
input[type='checkbox'] {
-webkit-appearance: radio; /* Chrome, Safari, Opera */
-moz-appearance: radio; /* Firefox */
appearance: radio; //how about IE>8 ?
}
The appearance property is not supported in Internet Explorer. You would need to instead target the pseudo element ::-ms-check and affect its presentation, and even this will only get you part-way:
::-ms-check {
border-radius: 50%;
}
As Spudley stated in the comments above, this is a bad idea. Radio buttons and checkboxes function in distinctly different ways, and users have been taught to distinguish between the two.
Related
Text highlighting is not working for all input fields in my asp.net web app with the latest versions of FireFox and Google Chrome (CTRL+A does not work either). I have not been able to test older versions yet. With Edge it is working properly.
Details: Double-clicking text or moving the mouse over the text while holding the left mouse button does not highlight the text. Surprisingly, dragging and copy/paste does work. So the text is actually selected but not highlighted.
I searched through my CSS for disable-select but could not find a single occurrence.
Any suggestions where else to look for a cause?
The property that you need to search for is not disable-select, it's user-select. For example
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none;
The other property that you can look for is: ::selection for Chrome and ::-moz-selection for Firefox.
Also, you can change the default selection color just for the test:
::selection {
background: #FF0000;
}
::-moz-selection {
background: #FF0000;
}
What I found out:
No occurrence of user-select: none in my CSS. But in Style.css I found:
::selection {
text-shadow: none;
}
Which I changed to:
::selection {
text-shadow: none;
background: #f7ea54;
/*or any other color*/
}
Now highlighting is working with all browsers! Why it does not work with the default setting, I could not figure out.
This will happen eventually with gamer mouse or when using in gaming. Enabling autofire or other similar mouse function alteration will lead to this kind of behavior.
There are few things you can to do to try turn off these:
– examine you mouse for such function buttons
– analyze mouse user manual for mouse function enhancements when pressing certain button combinations
– install manufacturer mouse application if available
– use the same game when you set these, to reverse them
I have a print style sheet for my site which prints the basics of a calculation (inputs & outputs).
I've successfully removed all the form elements across browsers apart from IE8 which refuses to remove the down arrow from the select inputs.
So far my code looks like this:
select {
width: 80px;
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
}
Works in Firefox & Chrome but not IE8.
Any suggestions ?
How can I disable the new functionality in Internet Explorer 10 that shows a little 'x' in a textbox when it's focused and I have content in it?
input[type=text]::-ms-clear {
display: none;
}
In IE 10+, text inputs (input[type=text]) show a (x) button on the right-side on the field once you start typing, it's used to clear/remove the entered text value.
In Chrome, search inputs (input[type=search]) show a similar button.
If you prefer to remove either of them for IE10+ and/or Chrome. You can add the style below to hide this button from the input.
See it in action...
http://codepen.io/sutthoff/pen/jqqzJg
/* IE10+ */
::-ms-clear {
display: none;
}
/* Chrome */
::-webkit-search-decoration,
::-webkit-search-cancel-button,
::-webkit-search-results-button,
::-webkit-search-results-decoration {
display: none;
}
This is how I did it
input[type=text]::-ms-clear
{
display: none;
}
input::-ms-clear{
display:none;
}
This did the trick for me.
Note that the style and CSS solutions don't work when a page runs in compatibility view. I'm assuming that this is because the clear button was introduced after IE7, and so the IE7 renderer used in compatibility view doesn't see ::-ms-clear as a valid style heading.
Website: http://clandestinoangusto.it/
Hi, can anybody explain why WebKit browsers are not able to highlight selected texts in the above given website? Its working fine with IE and FF,But chrome and safari just showing the highlight cursor, but not able to select text.
Probably it's something about CSS, but I can't fix it at all.
Thankyou.
Remove this from body style
-webkit-user-select:none;
I know this has been answered, but the following code will let you style the highlight:
/* webkit, opera, IE9 */
::selection { background: tomato; }
/* mozilla firefox */
::-moz-selection { background: tomato; }
Might come in useful.
I have been pulling my hair out trying to get Chrome to style my search input with a background image. Firefox has no problem, but I fear it's because it treats the input as a regular text input. Is this simply not possible?
Try this as a demo:
<input type="search" />
input[type="search"] {
background: transparent
url(http://google.com/intl/en_ALL/images/srpr/logo1w.png) no-repeat 0 0;
}
If it worked correctly, it should put Google's logo (or part of it) as the background image for the "Search" input. But as you will see when you look at this in Chrome, it DOES NOT WORK. Any ideas, or is this just one of HTML5's quirks? :\
You can get Chrome (and Safari) to play along better with your styles on an HTML5 search field (including background images) if you apply this in your CSS:
-webkit-appearance: none;
You may also want to change -webkit-box-sizing to...
-webkit-box-sizing: content-box;
...since it appears that Webkit defaults this to the border-box value (basically the old IE5 box model).
Be warned, there's still no (apparent) way to have any effect on the position/appearance of the field-clearing button, and since only Webkit generates that button, you may find some new cross-browser annoyances to deal with.
Complete solution to remove all extra design caused by browser. This will change the search field to normal input field
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
display: none;
}
input[type="search"]{
-webkit-appearance: none;
-webkit-box-sizing: content-box;
outline:none;
}
Like you said, Mozilla treats search inputs as text. For Webkit browsers however (Chrome, Safari), the search input is styled as a client created HTML wrapper for the internal Webcore Cocoa NSSearchField. This is what gives it the round edges and the 'x' button to clear itself when there is text within it. Unfortunately it seems that not only are these extra features inaccessible by CSS/JS for the time being, but it also seems that there's no W3 specification for what CSS properties can be applied to this element as well as other new HTML5 elements. Until there is such a specification I wouldn't expect to have consistent behavior.
The cancel button can be styled with the following
input[type="search"]::-webkit-search-cancel-button {
/* Remove default */
-webkit-appearance: none;
/* Now your own custom styles */
height: 10px;
width: 10px;
background: red;
/* Will place small red box on the right of input (positioning carries over) */
}
Styling can be removed using
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
display: none;
}
http://css-tricks.com/7261-webkit-html5-search-inputs/