I have a structure like this:
<div class="input-wrapper">
<input placeholder="Full name">
<label>
<span>*</span>
<span>Full name</span>
</label>
</div>
I want to hide the second span of the label with SCSS, when I do a focus on input field.
I tried to:
.input-wrapper{
$this: parent;
...
input{
&:focus{
parent > label > span:nth-child(2){
display: none;
}
}
}
}
.input-wrapper{
...
input:focus{
.input-wrapper__label > span:nth-child(2){
display: none;
}
}
}
Maybe I could do something with label > span:nth-child(2) with if?
To achieve expected result, you can use below option of adjacent sibling selector(+) of targeting label on input focus
input:focus + label > span:nth-child(2)
Sample code below and codepen - https://codepen.io/nagasai/pen/PoBLBBm for reference
input:focus + label > span:nth-child(2){
display: none;
}
<div class="input-wrapper">
<input placeholder="Full name">
<label>
<span>*</span>
<span>Full name</span>
</label>
</div>
Related
with only css, how would one show/hide a div knowing its id?
with jQuery it would have been simple and even simpler with vanilla javascript, but how to do this with just css?
the checkbox hack needs to have a specific structure to work
also, I'd like it to only hide the div before the next h1, if there were any.
label:after {
content: " [show]";
cursor: pointer;
float: right;
}
p {
display: none;
}
input[type=checkbox] {
display: none;
}
input[type=checkbox]:checked + div {
display: block;
}
input[type=checkbox]:checked ~ label:after {
content: " [hide]"
}
<h1>
Vampires and Vegetarians
<label for="Vampires_and_Vegetarians"></label>
</h1>
<input type="checkbox" id="Vampires_and_Vegetarians">
<div id="Vampires_and_Vegetarians">
<p>Content for Vampires and Vegetarians</p>
</div>
In order for your checkbox to control things, it has to appear before it in the dom so I've moved it to the very top.
I've also changed your CSS a little, you were hiding the p and then trying to show the div now we're hiding the div then showing it.
I've also changed you + to a ~ as the div was not a direct sibling.
input[type=checkbox] {
display: none;
}
input[type=checkbox]:checked~h1 label:after {
content: " [hide]"
}
label:after {
content: " [show]";
cursor: pointer;
float: right;
}
input[type=checkbox]~div {
display: none;
}
input[type=checkbox]:checked~div {
display: block;
}
<section>
<input type="checkbox" id="Vampires_and_Vegetarians">
<h1>
Vampires and Vegetarians
<label for="Vampires_and_Vegetarians"></label>
</h1>
<div id="Vampires_and_Vegetarians">
<p>Content for Vampires and Vegetarians</p>
</div>
</section>
<section>
<input type="checkbox" id="Zombies_and_Zucchini">
<h1>
Zombies and Zucchini
<label for="Zombies_and_Zucchini"></label>
</h1>
<div id="Zombies_and_Zucchini">
<p>Content for Zombies and Zucchini</p>
</div>
</section>
I hope you find this helpful 🙂
Feel free to ask for clarification.
You will need to change the hierarchy of the elements here like below. Because ~ is used to target the next siblings elements not the previous one. Also don't use the same id twice
label:after {
content: " [show]";
cursor: pointer;
float: right;
}
.content {
display: none;
}
input[type=checkbox] {
display: none;
}
input[type=checkbox]:checked~.content {
display: block;
}
input[type=checkbox]:checked~h1 label:after {
content: " [hide]"
}
<div>
<input type="checkbox" id="1">
<h1>
1
<label for="1"></label>
</h1>
<div class="content">
<p>Content for 1</p>
</div>
</div>
<div>
<input type="checkbox" id="2">
<h1>
2
<label for="2"></label>
</h1>
<div class="content">
<p>Content for 2</p>
</div>
</div>
Id cannot be used twice in the same page. read-
https://css-tricks.com/the-difference-between-id-and-class/
Your code is right but the structure was slightly wrong. See my snippet below
label:after {
content: " [show]";
cursor: pointer;
float: right;
}
div {
display: none;
}
input[type=checkbox] {
display: none;
}
input[type=checkbox]:checked ~ label ~ div {
display: block;
}
input[type=checkbox]:checked ~ label:after {
content: " [hide]"
}
<input type="checkbox" id="Vampires_and_Vegetarians">
<label for="Vampires_and_Vegetarians">Vampires and Vegetarians</label>
<div><p>Content for Vampires and Vegetarians</p></div>
Hope this helps :)
UPDATE AFTER READING PO COMMENT
In case you have more divs to show and hide content through checkbox,
you just need to apply a unique id to every div. That's it. :)
see below example
label:after {
content: " [show]";
cursor: pointer;
float: right;
}
section {
display:block;
margin-top:20px;
}
div {
display: none;
}
input[type=checkbox] {
display: none;
}
input[type=checkbox]:checked ~ label ~ div {
display: block;
}
input[type=checkbox]:checked ~ label:after {
content: " [hide]"
}
<section>
<input type="checkbox" id="Vampires_and_Vegetarians1">
<label for="Vampires_and_Vegetarians1">Vampires and Vegetarians 1</label>
<div><p>Content for Vampires and Vegetarians 1</p></div>
</section>
<section>
<input type="checkbox" id="Vampires_and_Vegetarians2">
<label for="Vampires_and_Vegetarians2">Vampires and Vegetarians 2</label>
<div><p>This is 2nd para</p></div>
</section>
<section>
<input type="checkbox" id="Vampires_and_Vegetarians3">
<label for="Vampires_and_Vegetarians3">Vampires and Vegetarians 3</label>
<div><p>This is 3rd para</p></div>
</section>
I have to insert "*" to the label only if input is required.
There is a way to get the label of the input tag from the class .notEmpty?
<label for="foo">Foo</label>
<input class="notEmpty" id="foo">
You could make the field required and then use the input:valid selector to show the star when the field is empty.
Markup:
<label for="foo">Foo</label>
<input class="text" id="foo" required="required">
<span class="star" style="visibility: visible;">*</span>
CSS:
.text:valid + .star { visibility: hidden!important; }
See a working CodePen Here: https://codepen.io/fennefoss/pen/aWpqqj
You can try a little hack something like this :
label{
float: left;
margin-right: 10px;
}
.notEmpty + label::after{
content: '*';
}
<input class="notEmpty" id="foo">
<label for="foo">Foo</label>
I need to toggle styles on the corresponding label when input's focus.
HTML+CSS:
<div>
<label for="e_mail">E-Mail</label>
<input type="text" />
</div>
input[type=text]:focus + label {
color: red;
}
P.S. how to do this without changing tags "label" and "input" in HTML?
You can only do that with pure CSS if label is inserted after the input. A fix to that could be using float: left; on the label to put it to the left.
Also, <label for=""></label> require the input to have a id in order to work propertly.
<div>
<input type="text" id="e_mail" />
<label for="e_mail">E-Mail</label>
</div>
-
input[type="text"]:focus + label {
color: red;
}
label {
float: left;
}
https://jsfiddle.net/vcw880fr/1/
I'm using CSS supplied in another post by Behaves Ganging which hides and shows content based on inputs being checked or not.
Here is the CSS
input#show, input#hide {
display:none;
}
span#content {
display:none;
}
input#show:checked ~ label[for="show"]
{
display: none !important;
}
input#show:checked ~ span#content {
display:block;
}
input#hide:checked ~ span#content {
display:none;
}
And the HTML
<label for="show">
<span>[Show]</span>
</label>
<input type=radio id="show" name="group">
<span id="content">Content
<label for="hide">
<span>[Hide]</span>
<input type=radio id="hide" name="group">
</label>
</span>
See a working example here: http://jsfiddle.net/khnNe/466/
BUT, this CSS seems to be being ignored:
input#show:checked ~ label[for="show"]
{
display: none !important;
}
I want to hide the Label "Show" when it's input is checked. I've tried several other ways but none worked. ??
If I add CSS
label[for="show"]
{
display: none !important;
}
[Show] is hidden so it seems the
input#show:checked ~ label[for="show"]
is the culprit?
The selector is not working because the label is before the input.
The general sibling combinator is made of the "tilde" (U+007E, ~) character that separates two sequences of simple selectors. The elements represented by the two sequences share the same parent in the document tree and the element represented by the first sequence precedes (not necessarily immediately) the element represented by the second one.
You have to reverse the DOM order:
input#show,
input#hide {
display: none;
}
span#content {
display: none;
}
input#show:checked ~ label[for="show"] {
display: none !important;
}
input#show:checked ~ span#content {
display: block;
}
input#hide:checked ~ span#content {
display: none;
}
<input type=radio id="show" name="group">
<label for="show">
<span>[Show]</span>
</label>
<span id="content">Content
<label for="hide">
<span>[Hide]</span>
<input type=radio id="hide" name="group">
</label>
</span>
i want text inside the text field like "your name* "
the color of "your name" should be black and the color of * should be red.
how can i do this??
Please help me.
You cannot; the value of a text input field is plain text.
Put the explanation, including the requiredness indicator if desired, in a label, not into the field. The you can use markup for the indicator, and color it:
<label for=name>Your name<span class=reqd>*</span>:</label>
<input id=name name=name size=40 required>
I think you should want this
CSS
label{
color:black;
}
label span {
color:red;
}
input{
line-height:25px;
color:gray;
font-size:16px;
}
input:focus{
color:black;
}
HTML
<label>
Your Name:- <input type="text" value="your name"><span>*</span>
</label>
Live demo http://jsfiddle.net/rohitazad/dZmaZ/
You can't have different colours in one text box. (Reliably across browsers anyway)
The most common approach to this issue for required fields is to place the asterisk directly after the text box in an element with a class to set the text to red.
Example: http://jsfiddle.net/JzFd4/
This is what i was asking here in question.
Multiple Colors Placeholder.
Answer Link Here
Some Trick here
.input-field {
position: relative;
display: inline-block;
}
.input-field > label {
position: absolute;
left: 0.5em;
top: 50%;
margin-top: -0.5em;
opacity: 0.5;
}
.input-field > input[type=text]:focus + label {
display: none;
}
.input-field > label > span {
letter-spacing: -2px;
}
.first-letter {
color: red;
}
.second-letter {
color: blue;
<div class="input-field">
<input id="input-text-field" type="text"></input>
<label for="input-text-field">
<span class="first-letter">your name</span>
<span class="second-letter">*</span>
</label>
</div>