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/
Related
<div class="form-group">
<label for="Description">"Description"</label>
<input type="text" id="Description" class="form-control"
[(ngModel)]="description" name="Description"
required />
</div>
Is there anyway to add a star (*) after label( label::after) without changing anything in the code by just adding CSS selector? AFAIK there is no support for previous css selector (has) so I cannot use something like:
label:has(+ input:required)::after {
content:" *";
}
No.
Via CSS-only there is no way to achieve the result without changing markup or javascript in the code unless
1) label and input are in the same line, side by side and
2) the background is a solid color
as in the example below, so you could cheat by always adding the star, but if the sibling input is not [required] then cover the star using a box-shadow.
input { border: 1px #ccc solid }
label::after {
content: "*";
width: 1.5em;
margin-right: 1.5em;
}
label + input:not([required]) {
box-shadow: -3.2em 0 0 #fff;
}
<label>Username</label>
<input name='username' required />
<br /><br />
<label>Username</label>
<input name='username' />
But I'd suggest to at least revert the order of the elements in the markup (and showing them in the right order with display:flex and flex-direction: row-reverse)
If you are fine with adding a div around your every label and input group, then below approach can help you.
input {
border: 1px #ccc solid
}
input[required]+label::after {
content: "*";
color: red;
width: 1.5em;
margin-right: 1.5em;
}
.form-group {
display: flex;
}
.form-group label {
order: -1;
width: 100px;
}
<div class="form-group">
<input name='username' required />
<label>Username</label>
</div>
<br /><br />
<div class="form-group">
<input name='username' />
<label>Username</label>
</div>
The correct selector would be
.form-group:has(:required) label
But, alas, as the :has pseudo class is CSS Selectors Level 4 and has no browser support at all.
You can use it with jQuery though:
jQuery($ => {
$('.form-group:has(:required) label').each((i,el) => {console.log(el); el.classList.add('required')})
})
label.required:after {
content: ' *';
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
<label for="Description"><span>Description</span></label>
<input type="text" id="Description" class="form-control"
name="Description"
required />
</div>
Since you seem to use angular, this might get a little tricky. I don't know, if there is something like this in Angular.
So I basically have a label and text like this:
<label class="labelClass"> for="something">
<input id="inputID" class="inputClass" name="inputName" value="value" type="radio">
Some text inside the label.
</label>
Note that this is just an example and not used for any other means.
So I can and know how to call to this label and input, but They keep looking like this:
I already tried:
margin-right
padding & padding-right
text-align:center
Like in the following css example:
.page-to-the-css label.something.option {
margin-right:20px;
padding-right:20px;
text-align:center;
}
and also for the radio button:
.page-to-the-css input.something.inputClass {
margin-right:20px;
padding-right:20px;
text-align:center;
}
Hope anyone could help me solve this problem.
Note: I also can't touch the jquery, javascript or anything else but css, so keep it at css please.
UPDATE: Neither did any of the current answers work, also not the one of VilleKoo.
EDIT: This is the form it is happening to: form This website is drupal so I can't reach the html or sadly I can't provide you guys of any code. I hope this problem could be solved either way.
This should work for you.
label {
display: block;
}
input {
display: inline-block;
margin-right: 0.5rem;
}
<label id="labelID" for="something">
<input id="inputID" class="inputClass" name="inputName" value="value" type="radio">
Some text inside the label.
</label>
<label id="labelID" for="something">
<input id="inputID" class="inputClass" name="inputName" value="value" type="radio">
Some text inside the label.
</label>
Look my example, it is easy
.labelClass {
position: relative;
display: block;
text-align: center;
padding-left: 20px;
}
.labelClass .inputClass {
position: absolute;
left: 0;
}
<label class="labelClass" for="something">
<input id="inputID" class="inputClass" name="inputName" value="value" type="radio">
Some text inside the label.
</label>
Many HTML elements have a default margin setting. You can override this and set it to 0. In your case, you want to reset margin-right on the radio button:
<input type="radio" name="beds" value="1" style="margin-right: 0" />
You probably want to add it to your stylesheet so that it applies to all radio buttons:
input[type="radio"] {
margin-right: 0;
}
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>
In the below code my span is showed at the right side of the text box I want it below the text box. Please let me know what can be done?
<fieldset class="no_border">
<div class="float_left">
<label>Age in years:</label>
<br />
<input readonly="readonly" type="text" class="effect" id="nominee_one_years" name="nominee_one_years" value="0" style="width:20%" /><span id="info_nominee_one_years">x</span>
</div>
<div class="float_left">
<label>Relationship:</label>
<br />
<input type="text" class="effect" name="nominee_one_relationship" id="nominee_one_relationship" style="width:95%" /><span id="info_nominee_one_relationship">x</span>
</div>
<div class="float_left">
<label>Relationship:</label>
<br />
<input type="text" class="effect" name="nominee_one_relationship" id="nominee_one_relationship" style="width:95%" /><span id="info_nominee_one_relationship">x</span>
</div>
#nominee_details span {
margin-left: 0px;
color: #b1b1b1;
font-size: 11px;
font-style: italic;
display:none;
}
fieldset.no_border {
overflow:hidden;
border:0;
padding:0 0 10px 0;
margin:0;
}
.float_left {
float:left;
width:33%;
}
other spans without DIV
<fieldset class="no_border">
<label>Age in years:</label>
<br />
<input readonly="readonly" type="text" class="effect" id="nominee_one_years" name="nominee_one_years" value="0" style="width:20%" /><span id="info_nominee_one_years">x</span>
</fieldset >
JS Fiddle
I actually have 2 situation
1st where are inside fieldset and div as shown above and
2nd where are inside fieldset
span for 1st case are not getting rendered below text box
span for second are displayed properly
if you see my jsfiddle you shall understand what i am trying to explain
http://jsfiddle.net/dwWww/5/
Are you looking for this?
.float_left span {
display: block;
}
If you can use jquery, First you set display: none;
$(".float_left span").css("display","none");
But when you detect an error just do:
$(".float_left span").css("display","block");
Or just:
.addClass() //set display block
.removeClass() //set display none
Or:
$(".float_left span").text("Error!!");
and
$(".float_left span").text('');
Update:
.float_left span, #nominee_details span {
display: block;
}
http://jsfiddle.net/M8XQ6/
span is an inline element, you may want to use a block level element like div or p or set display:block to the span or put a <br/> just before the 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>