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>
Related
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>
<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 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/
How can I make this:
Look like this:
I.e have the two fields and the sign in buttons side by side? Thanks
Give both fields a different class and assign to the most left one float:left;
HTML:
<input type="text" class="field1"/>
<input type="text" class="field2"/>
CSS:
.field1 {
float:left;
}
I assume this is more what you need:
http://jsfiddle.net/mrchris2013/NtVuq/12/
HTML:
<label>Username</label>
<label>Password</label>
<input type="text" />
<input type="text" />
<input type="button" value="Login" />
CSS:
label, input[type=text] {
width: 150px;
float: left;
}
label + input[type=text] {
clear: left;
}
input[type=button] {
float: left;
}