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;
}
Related
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).
Edit: apparently cant use <> braces or it hides names?...
I've seen a few variations of this question asked, however none of what I found fits my particular issue, which I think is a simple issue. I am creating the following radio button group in react:
const myOptions = ["YTD", "Week", "Month", "Pre AS", "Post AS"]
const myButtons =
<form>
<div className="radio-group">
{myOptions.map((d, i) => {
return (
<label>
<input
type={"radio"}
value={myOptions[i]}
checked={timeframeNew === myOptions[i]}
onChange={this.handleTimeframeNewChange}
/>
<span>{myOptions[i]}</span>
</label>
)
})}
</div>
</form>;
and here is my current CSS for styling the buttons to look nice...
input[type=radio] {
position: absolute;
visibility: hidden;
display: none;
}
label {
color: #333;
background: #EEE;
display: inline-block;
cursor: pointer;
font-weight: bold;
padding: 5px 20px;
border: 2px solid orange;
}
input[type=radio]:checked + label {
color: red;
background: #333;
}
label + input[type=radio] + label {
border-left: solid 2px blue;
}
.radio-group {
border: solid 2px green;
display: inline-block;
margin: 20px;
border-radius: 10px;
overflow: hidden;
}
Unfortunately, the CSS is not working as intended. In particular, the following selection - input[type=radio]:checked + label does not work because there is no label immediately after an input. The only way so far I have been able to successfully get my react onChange handler function to work is by putting the input inside of the label, like this, and then returning the label in each .map loop.
*Since the return needs to be a single element, if I want to take the out of the label, I would need to then include them both in a div or a span, and for some reason doing so breaks my onChange handler...
So my question is, how how how can I, in CSS, grab the label that corresponds to the clicked input. I would like to change the entire label's color and background when it is / isn't clicked, so selecting the span does not help (since that only changes the texts color/background, not the whole label.
Thanks in advance!!
CSS can select child and sibling elements, but not parent elements. I often hide default radio buttons and checkboxes and create my own, like this:
.button-group{
font-size:0; /*Prevents a space from occuring between buttons*/
}
.button-group input{
position:absolute;
visibility:hidden; /* display:none causes some browsers to ignore the input altogether */
}
.button-group input+span{
display:inline-block;
line-height:20px;
font-size:1rem;
vertical-align:top;
padding:0 10px;
color:#000;
border-left:1px solid #a00;
}
.button-group label:first-child input+span{
border-radius:10px 0 0 10px;
border-left:0;
}
.button-group label:last-child input+span{
border-radius:0 10px 10px 0;
}
.button-group input:not(:checked)+span{
background-color:#faa;
}
.button-group input:not(:checked)+span:hover{
background-color:#f66;
}
input[type=radio]:checked+span{
background-color:#f33;
}
<div class="button-group">
<label>
<input type="radio" value="1" name="myfield" />
<span>Option 1</span>
</label>
<label>
<input type="radio" value="2" name="myfield" />
<span>Option 2</span>
</label>
<label>
<input type="radio" value="3" name="myfield" />
<span>Option 3</span>
</label>
</div>
*Since the return needs to be a single element, if I want to take the out of the label, I would need to then include them both in a div or a span, and for some reason doing so breaks my onChange handler...
You can use <React.Fragment> <input /> <span /> </ReactFragment> to return multiple elements without rendering them inside a div or span
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">
Here is the code:
input:not(#radioo input){
display: block;
font-size:23px;
border-radius: 10px;
width:310px;
height: 40px
}
but all input are excluded! and I want only to exclude input that is in the form that has the ID radioo
:not only takes simple selectors the best solution would be to give each input you want to exclude a class and use :not(.theclass)
From the comments it seems there is a solution without adding a class
form:not(#radioo) input{
display: block;
font-size:23px;
border-radius: 10px;
width:310px;
height: 40px
}
The following selector seems to do what you want. Only the input in the second form will have an orange background.
http://jsfiddle.net/pYhgr/
form:not(#radioo) input {
background: orange;
}
<form id="radioo">
<input type="text" />
</form>
<form>
<input type="text" />
</form>
Is there any way to have a label respond to focus. I have some code where the textfield has a different style on focus. The label also however needs a slightly different style. I tried this but it did not effect the label.
#header .search label {
background:url(http://www.golfbrowser.com/images/icons/search.png) left top no-repeat;
padding-left:20px;
height:20px;
float:right;
}
#header .search label:focus {
background:url(http://www.golfbrowser.com/images/icons/search-z.png) left top no-repeat;
padding-left:20px;
height:20px;
float:right;
}
#header .search input {
padding:0px;
border:0px;
width:140px;
height:20px;
float:left;
padding-right:10px;
background:url(http://www.golfbrowser.com/images/icons/searchbar.png) right top no-repeat;
}
#header .search input:focus {
padding:0px;
width:190px;
height:20px;
float:left;
padding-right:10px;
background:url(http://www.golfbrowser.com/images/icons/searchbar-z.png) right top no-repeat;
}
The label contains an image and the other part of a round corner and it too must change colour in order for the field to look correct.
Any ideas,
Marvellous
You can't actually give focus to a label. It's not a focusable form element. Besides, even if you could do that, then whatever previously had focus (that means your input) would lose it to the label anyway.
You may have to restructure your HTML (and modify your CSS accordingly) so that you can select input:focus and then that input's corresponding label. For instance, if you moved your label after your input and used the following CSS selector for your label, you should be able to accomplish what you want.
#header .search input:focus + label
BoltClock's answer is the more semantic, lightweight way of achieving this functionality. However it's not always possible to have a specific HTML structure (especially to facilitate a minor feature like this) and CSS lacks the ability to traverse up the HTML hierarchy. To get around that, here are two alternatives. The first is coming soon (CSS spec 4) and the second is our old mate Javascript.
First up, CSS4's :focus-within pseudo selector. This does exactly what it says on the tin (scopes based on any child element's active focus state). Read more about the spec here. So assuming you have a HTML structure of:
<div class="input-wrapper">
<label for="elem">Label Text
<input name="elem" id="elem" type="text" />
</label>
</div>
you could scope the 'focussed' label by simply:
label:focus-within{}
by the same token, you could also scope the parent div with:
div.input-wrapper:focus-within{}
Magical. But not for use today :(
Second up, if you're already using a JS selector engine (i.e. jQuery, Sizzle, etc.), you could also do something along the lines of:
$('input').on("focus", function(){
var input = $(this);
// assuming label is the parent, i.e. <label><input /></label>
var label = $(this).parent();
label.addClass('focussed');
input.on("blur", function(){
label.removeClass('focussed');
input.off("blur");
});
});
This is untested but the essence of what this achieves is using a class rather than the :focus pseudo selector. So you can add your focussed styles to label.focussed{}. I've added (and self-removed) the blur handler to facilitate removing the class.
Now using Flex box will solve this. Have the label element follow the input element in the HTML. Then use flex-direction: column-reverse to change its position to appear above the input element. You can then use the input:focus + label: {} to target the label.
.input-container {
display: flex;
flex-direction: column-reverse;
}
.input-container > input {
/* your input styles */
}
.input-container > input:focus + label {
/* targets the label when the input receives focus */
color: red;
}
<div class="input-container">
<input type='email' />
<label>Email</label>
</div>
use:checked instead of :focus and you must give id,name,value into 'input'.
Found a good solution - order property made a trick:
input:focus {
background-color: #F2FFF0;
}
* {
font-family: "Arial";
font-size: 13px;
}
div.settings {
display:grid;
grid-template-columns: max-content max-content;
grid-gap: 7px
}
div.settings label {
text-align:right;
padding-top: 3px
}
div.settings label:after {
content: ":";
}
div.settings input:focus + label:before {
content: "\25B6 ";
font-size: 12px;
color: red;
}
input {
border: 1px solid #ccc;
padding: 2px 4px;
font-size: 13px;
}
<div class="settings">
<input style="order:2" type="text" title="(vardas, pavardė ir pan.)" autocomplete="off" id="name" name="name" required minlength="4" maxlength="128" size="50"><label style="order:1" for="name">Pirkėjas</label>
<input style="order:4" type="text" title="" autocomplete="off" id="company" name="company" required minlength="4" maxlength="128"><label style="order:3" for="company">Įmonės pavadinimas</label>
<input style="order:6" type="text" title="" autocomplete="off" id="companyCode" name="companyCode" required minlength="4" maxlength="128"><label style="order:5; min-width: 160px" for="companyCode">Įmonės (asmens) kodas</label>
</div>