I want to set a placeholder for a select input in Vuejs
The example in this PEN.
https://codepen.io/halcolo/pen/ZELVVvw
In this example, I want to change the color of the default value Years in service (My placeholder for this select input) I'm trying to change the CSS.
option[value=""][disabled]{
color: #bebebe
}
But don't change anything, I used this after but at this case it does not work
Set an ID in the select
<select #change="onChangeEvent(field)" :id="field.label" class="Select" >
Unlock the appearance of select with this CSS.
.select .Select{
-webkit-appearance: none; /* WebKit */
-moz-appearance: none; /* Mozilla */
-o-appearance: none; /* Opera */
-ms-appearance: none; /* Internet Explorer */
appearance: none; /* CSS3 */
color:#bbb;
}`
Create a method on change event and use it as a change in the select
onChangeEvent(field){
console.log(field.label)
document.getElementById(field.label).style.color = "#000000";
For the complete example.
https://codepen.io/halcolo/pen/ZELVVvw
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 am using the default HTML5
sample line of code:
I have used a custom background. I want to remove the black arrow that appears on the right.
The image shows a black arrow that appears. Need it remove it. I tried many css tricks but didn't work.
Sample code
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
margin: 0;
}
or
/* Hide the cancel button */
::-webkit-search-cancel-button {
-webkit-appearance: none;
}
/* Hide the magnifying glass */
::-webkit-search-results-button {
-webkit-appearance: none;
}
/* Remove the rounded corners */
input[type=search] {
-webkit-appearance: none;
}
Arrows
input[type="time"]::-webkit-inner-spin-button {
-webkit-appearance: none;
}
Clear (x) button
input[type="time"]::-webkit-clear-button {
-webkit-appearance: none;
}
Just Hide that Arrow
The arrow for <input type="time"> itself — which for example appears on Android — can be removed like this:
input[type="time"] {
-webkit-appearance: none; // Hide the down arrow
}
Take Full Control
But hiding the arrow will still leave you with an issue: the input renders a blank space on the right side of the input field, and it won't react to different settings of text-align. In order to control these, you need to make further adjustments:
input[type="time"] {
-webkit-appearance: none; // Hide the down arrow
}
// Android renders the time input as a flex box
// with a left-aligned flex element "webkit-date-and-time-value" for the value.
// It also leaves a blank space of 24px for the down arrow.
input[type="time"]::-webkit-date-and-time-value {
margin: 0; // By default Android renders this as 1px 24px 1px 1px
width: 100%; // Let the flex element take the full width of the input
text-align: center; // Control your text alignment here
}
Does anyone know how to resolve this browser issue where button input fields double up on Windows 7 Firefox (v 31)?
The secondary buttons hide the number field.
You can view the +/- buttons in question that are next to the "Add to basket" button here...
http://instituteofleadership.org.uk/wp/product/personal-leadership-programme/
Thanks
input[type=number] {
-moz-appearance:textfield;
}
/* hides the spin-button for chrome*/
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
source: https://stackoverflow.com/a/23374725/4016757
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