This question already has an answer here:
input[type=number] placeholder color in FF29+
(1 answer)
Closed 8 years ago.
Is it possible to style the placeholder of an input field with type number in firefox?
Example code:
<input type="text" placeholder="foo">
<input type="number" placeholder="foo">
css:
input::-moz-placeholder {
color: red;
}
input:-moz-placeholder {
color: red;
}
http://codepen.io/anon/pen/yEtFB
In webkit the placeholder get's styled corretly. (with the webkit prefixed placeholder style)
You can achieve it by using below code. A working Demo
input[type="number"]
{color:red;}
Note:
In chrome it will not reflect until you define a initial value like below.
<input type="number" placeholder="foo" value="5">
Related
This question already has answers here:
Using CSS :before and :after pseudo-elements with inline CSS?
(10 answers)
Closed 3 years ago.
<style>
::placeholder {
color: red;
}
</style>
<input id="date" name="date" placeholder="Please select release date" type="text"/>
this is my css. Is there any way to define this inline ? I mean with style = "" .
With CSS variables you can do like below but you need at least to define the style that you can change later:
::placeholder {
color: var(--c, red); /* The default is red */
}
<input id="date" name="date" placeholder="select date" type="text" >
<input id="date" name="date" placeholder="select date" type="text" style="--c:blue" >
This question already has an answer here:
Remove default focus outline and change to different color [duplicate]
(1 answer)
Closed 4 years ago.
I tried to remove the highlighted blue box in the following picture on clicking the input. It is not working. What's wrong here?
<link href="css/bootstrap-v3.5.5.min.css" rel="stylesheet" type="text/css">
<input type="text" class="form-control" placeholder="Enter here" readonly>
In css,
.form-control:focus {
outline: none;
}
First, ensure that your style comes after your Bootstrap styles so that it overwrites them. The box-shadow is set to none. Not sure if you also wanted the blue border to be removed on focus, so I've changed that too.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
.form-control:focus {
box-shadow: none;
border: 1px solid #ccc;
}
</style>
<input type="text" class="form-control" placeholder="Enter here">
I'm trying to style the key icon that appears in the password field on Safari below:
I'm trying the following:
input::-webkit-credentials-auto-fill-button {
color: white;
}
<input type="password" class="form-control form-control-lg" name="password" ngModel required placeholder="password">
but that's not working. Any idea why?
The unintuitive thing about styling these elements is that you need to use background-color:
input::-webkit-credentials-auto-fill-button {
background-color: white;
}
There is already an answer for the similar -webkit-contacts-auto-fill-button element here:
Safari - Webkit contacts autofill button icon change color on empty
This question already has answers here:
Can the :not() pseudo-class have multiple arguments?
(5 answers)
Closed 7 years ago.
I understand the basic gist of using :not() in CSS, but it doesn't seem to work for me. I am trying to do something like:
input[type=text][readonly]:not(.class1, .class2) {
background-color: #DDDDDD;
color: #1E1E1E;
}
But this does nto seem to work for me. whenever I read any information on this, it will have examples like input:not(.class1, .class2) {, but nothing between the tag and the :not() part. Am I correct in assuming that the syntax I have written is incorrect? Can I not define the tag element any more if I use :not()?
Your only issue is that you're passing two selectors inside the :not() use only one per statement.
Currently extended arguments (foo, bar) are not supported by any browser.
Use
:not(.class1):not(.class2)
https://developer.mozilla.org/en-US/docs/Web/CSS/%3Anot
input[type=text][readonly]:not(.class1):not(.class2) {
background-color: #DDDDDD;
color: #1E1E1E;
}
<input type=text readonly class="class1">
<input type=text readonly>
<input type=text readonly class="class2">
:not accepts only simple selectors, and not lists of them.
So your selector should look like:
input[type=text][readonly]:not(.class1):not(.class2) {...}
Use it combined way:
:not(.class1):not(.class2)
The :not selector is not a function. It is like any other selector taking in the other selector.
Your final CSS should be:
input[type=text][readonly]:not(.class1):not(.class2) {
/* Styles */
}
Snippet
input[type=text][readonly]:not(.class1):not(.class2) {
background-color: #DDDDDD;
color: #1E1E1E;
}
<input type=text readonly class="class1">
<input type=text readonly class="class2">
<input type=text readonly>
This question already has answers here:
How to affect other elements when one element is hovered
(9 answers)
Closed 8 years ago.
For example, I want to make two textboxes have the same style when either is focused:
<div class="divTxt">
<input type="text" id="a" class="a" />
<input type="text" id="b" class="b" />
</div>
and the css would be:
.a:focus
{
background-color:Blue;
}
.b:focus
{
background-color:Yellow;
}
What I need is make a's background-color:Yellow when b is focused and vice versa.
any possibilities? Thanks a lot.
You could try the General Sibling Selector(~) if the input boxes are next to each other.
Something like:
.a:focus { background-color:Blue;}
.a:focus~.b { background-color:Blue;}
.b:focus { background-color:Yellow;}
.b:focus~.a { background-color:Yellow;}
Note: Completely untested and a stab in the dark at best!
If they've got javascript disabled, they probably won't notice text box styles.
.chk1:focus{
background-color:Blue;
}
.chk2:focus{
background-color:Yellow;
}
text feilds
<input class=chk1 type=text id="a">
<input class=chk2 type=text id="b">
This one will work fine with FireFox but might have issues with IE6
See CSS Issue Focus For IE6
If you want this to work with IE, you might want to use javascript!!
Hope this helps
RDJ