If I apply the following rule to an input element with id #one then the placeholder color will change,
#one::-webkit-input-placeholder {
color: red;
}
But if I use comma separater to combine placeholder rules of different browsers then the color doesn't apply, e.g.
#two::-webkit-input-placeholder,
#two::-moz-placeholder{
color: red;
}
Working example:
#one::-webkit-input-placeholder {
color: red;
}
#two::-webkit-input-placeholder,
#two::-moz-placeholder{
color: red;
}
<input id="one" type="text" placeholder="one">
<input id="two" type="text" placeholder="two">
Why does the #two placeholder not change its color to red?
This is because a browser will only apply a rule form a selector it can fully interpret.
For a webkit type browser -webkit-input-placeholder is valid but -moz-placeholder is not, so it trashes the entire selector, and vise-versa for a geeko based browser.
The solution is to separate browser specific selectors.
#two::-webkit-input-placeholder{
color: red;
}
#two::-moz-placeholder{
color: red;
}
I know it is now a complete answer, but you could add different classes for each input
#one::-webkit-input-placeholder {
color: red;
}
#two::-webkit-input-placeholder{
color: red;
}
#two::-moz-placeholder{
color: red;
}
<input id="one" type="text" placeholder="one">
<input id="two" type="text" placeholder="two">
Related
I am trying to style element plus' el-radio-button in a el-radio-group to have different colours. It is not available by the el-radio-button properties, so I'm trying to target the rendered html elements. When I inspect my webpage, something like the following is shown:
<label class="el-radio-button" role="radio" aria-checked="false" aria-disabled="false" tabindex="-1" data-v-bf51d4b2="" style="color: red;">
<input class="el-radio-button__original-radio" type="radio" name="" tabindex="-1" value="Karthus">
<span class="el-radio-button__inner">Karthus</span>
</label>
The styles are applied on label.el-radio-button and span.el-radio-button__inner but I can't seem to target them using the following styles in my sfc:
<style lang="scss" scoped>
.el-radio-button {
color: red;
padding: 20em;
.el-radio-button__inner {
color: blue;
&:hover {
color: red;
}
}
}
</style>
None of these are applying. I can't really tell whether it's because of specificity, or just overrides, etc. !important on the color properties also don't seem to apply. Is there a way to properly target the rendered html elements in the sfc style?
Use more specific css selectors and it should work
<style>
.el-radio-group .el-radio-button {
color: red;
padding: 20em;
}
.el-radio-group .el-radio-button__inner {
color: blue;
}
.el-radio-group .el-radio-button__inner:hover {
color: red;
}
</style>
example
I need to change color of label when textarea receiving some value.
<form action="#" class="form-reverse">
<textarea name="order-background__bussiness" id="order-background__bussiness" cols="30" rows="10"></textarea>
<label for="order-background__bussiness">What are the company’s objectives?</label>
</form>
When we focusing textarea it works fine with this code:
textarea:focus ~ label{
color: #55c57a;
}
But, I need this color: color: #ff8086; when we don't have any values, and green one(as on image above) when anything written on textarea.
I've tried :active , but it works only when Mouse clicked:
textarea:active ~ label{
color: #ff8086;
}
Maybe someone has a solution for this?
PS: I do have a solution for this with JS , but I'm curious if there is any solution with SASS as well?
You can use the css valid property, it will match if the textarea is a valid field you can set the required attribute and it will match the valid selector if valid...
https://www.w3schools.com/cssref/sel_valid.asp
textarea:valid + label{
background: #ff0000;
}
<textarea required="required"></textarea><label>label</label>
You can also try like this, this will work fine as above:
textarea:not(:invalid) + label{
background: #ff0000;
}
One further option, that avoids making the <textarea>, and other form elements, required is to use the :placeholder-shown pseudo-class; this does, of course, require that a placeholder attribute be set (although it can be set to a whitespace, or zero-length, string):
/* selects a <label> element immediately adjacent to
an element which has its placeholder string visible
to the user: */
:placeholder-shown+label {
color: #f90;
}
/* this selects all <label> elements, but is less specific
than the selector above; so will be 'overridden' in the
event that the previous selector matches: */
label {
color: limegreen;
font-size: 1.5em;
}
*,
::before,
::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-size: 1rem;
}
.form-reverse {
display: flex;
flex-direction: column-reverse;
width: 80vw;
margin: 0 auto;
}
textarea {
width: 100%;
min-height: 30vh;
}
:placeholder-shown+label {
color: #f90;
}
label {
color: limegreen;
font-size: 1.5em;
}
<form action="#" class="form-reverse">
<textarea name="order-background__bussiness" id="order-background__bussiness" placeholder=" "></textarea>
<label for="order-background__bussiness">What are the company’s objectives?</label>
</form>
JS Fiddle demo.
References:
:placeholder-shown (Selectors Level 4 spec).
I need form like that:
So when field is full i want color: blue;
How to code that with css.
must be something like:
.formfield:?? {
color: blue;
}
You can use onkeyup="this.setAttribute('value', this.value);" and in css .formfield:not([value=""]) and set border-color not color
.formfield:not([value=""]) {
border-color: blue;
}
<input value="" class="formfield" onkeyup="this.setAttribute('value', this.value);"/>
If you set validation to input like required
.formfield:valid { border-color: blue; }
<input class="formfield" required>
I've got an input box. I customise it in normal state and on focus.
My question is how do I keep the focus CSS styling if text is present in the input box?
.par input[type=sample]{
width:75px;
background-color: #000;
}
.par input[type=sample]:focus{
width:50px;
background-color: #FF0;
}
There are no pure CSS selectors to directly select and style text boxes based on their content. But if the field is a mandatory field (that is, you could add the required attribute) then the :valid pseudo selector can be used to identify if the text box has any text type inside it or not and based on it apply the required styles.
input[type=text] {
width: 75px;
background-color: #000;
}
input[type=text]:focus,
input[type=text]:valid {
width: 50px;
background-color: #FF0;
}
<input type="text" required />
<input type="text" required />
input[value=""]:focus {
background-color: yellow;
}
<input onkeyup="this.setAttribute('value', this.value);" value="" />
another way would be to check in jquery.. using ':contains' selector
you can have one more selector with :valid pseudo-class.
.par input[type=sample]:valid{
width:50px;
background-color: #FF0;
}
I would like to style each letter of the word SEND separately. I can't insert HTML into the value field, and I would prefer not to use an image.
<input type="submit" value="SEND" />
I simply would like each letter to be a different color. Do you have any suggestions? Thank you.
Use Lettering.js (http://letteringjs.com/)
It allows you to style each letter according to the CSS specification which isn't fully implemented in browsers.
Check http://codepen.io/FWeinb/pen/djuIx for example, e.g.
And in addition, use button instead of input:
<button type="submit">SEND</button>
button::first-letter {
color: red;
}
EDIT: I created an ugly hack with HTML+CSS only by using button element with span elements: http://cssdeck.com/labs/apkycgyi
<button type="submit">
<span>S</span>
<span>E</span>
<span>N</span>
<span>D</span>
</button>
button {
font-size: 0px;
}
button > span {
font-size: 16px;
}
button span:nth-of-type(1) {
color: red;
}
button span:nth-of-type(2) {
color: blue;
}
button span:nth-of-type(3) {
color: green;
}
button span:nth-of-type(4) {
color: yellow;
}