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 ?
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
In the cart page of my website the radio button are shown badly in Chrome. If firefox looks just fine. I need Chrome to show them as Firefox does.
I tried this (but not working):
input, textarea, button {
-webkit-appearance: none;
-webkit-font-smoothing: antialiased;
resize: none;
}
input[type="radio"]{
-webkit-appearance: radio;
}
You can add a product and view the cart page here.
Take a look at the capture to see what I mean.
Generally you don't want to place pseudo classes onto an input but onto the label themselves. Nonetheless, I noticed that you have a display inline here:
input[type='checkbox'],
input[type='radio'] {
display: inline;
margin-right: 10px;
font-size: 16px;
}
try changing that to inline-block.
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.
On Firefox 28, I'm using <input type="number"> works great because it brings up the numerical keyboard on input fields which should only contain numbers.
In Firefox 29, using number inputs displays spin buttons at the right side of the field, which looks like crap in my design. I really don't need the buttons, because they are useless when you need to write something like a 6~10 digit number anyway.
Is it possible to disable this with CSS or jQuery?
According to this blog post, you need to set -moz-appearance:textfield; on the input.
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type=number] {
-moz-appearance:textfield;
}
<input type="number" step="0.01"/>
It's worth pointing out that the default value of -moz-appearance on these elements is number-input in Firefox.
If you want to hide the spinner by default, you can set -moz-appearance: textfield initially, and if you want the spinner to appear on :hover/:focus, you can overwrite the previous styling with -moz-appearance: number-input.
input[type="number"] {
-moz-appearance: textfield;
}
input[type="number"]:hover,
input[type="number"]:focus {
-moz-appearance: number-input;
}
<input type="number"/>
I thought someone might find that helpful since I recently had to do this in attempts to improve consistency between Chrome/FF (since this is the way number inputs behave by default in Chrome).
If you want to see all the available values for -moz-appearance, you can find them here (mdn).
In SASS/SCSS style, you can write like this:
input[type='number'] {
-moz-appearance: textfield;/*For FireFox*/
&::-webkit-inner-spin-button { /*For Webkits like Chrome and Safari*/
-webkit-appearance: none;
margin: 0;
}
}
Definitely this code style can use in PostCSS.
/* for chrome */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;}
/* for mozilla */
input[type=number] {-moz-appearance: textfield;}
Faced the same issue post Firefox update to 29.0.1, this is also listed out here
https://bugzilla.mozilla.org/show_bug.cgi?id=947728
Solutions:
They(Mozilla guys) have fixed this by introducing support for "-moz-appearance" for <input type="number">.
You just need to have a style associated with your input field with "-moz-appearance:textfield;".
I prefer the CSS way
E.g.:-
.input-mini{
-moz-appearance:textfield;}
Or
You can do it inline as well:
<input type="number" style="-moz-appearance: textfield">
This worked for me:
input[type='number'] {
appearance: none;
}
Solved in Firefox, Safari, Chrome. Also, -moz-appearance: textfield; is not supported anymore (https://developer.mozilla.org/en-US/docs/Web/CSS/appearance)
In 2021, there is a much better solution to make your firefox like Google Chrome.
You should use focus and hover, too.
input[type="number"] {
appearance: none; /* textfield also works! */
}
input[type="number"]:focus,
input[type="number"]:hover {
appearance: auto;
}
for more information, please read the documentation
I mixed few answers from answers above and from How to remove the arrows from input[type="number"] in Opera
in scss:
input[type=number] {
&,
&::-webkit-inner-spin-button,
&::-webkit-outer-spin-button {
-webkit-appearance: none;
-moz-appearance: textfield;
appearance: none;
&:hover,
&:focus {
-moz-appearance: number-input;
}
}
}
Tested on chrome, firefox, safari
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/