This question already has answers here:
Target the label of a checked input
(2 answers)
Closed 2 years ago.
I am trying make the text after input bold if input is checked but I am failing. I think my is not finding the text. I appreciate any help or hint.
input[type="radio"]:checked+ {
font-weight: bold;
}
<label for="radio-foobar">
<input type="radio" id="radio-3" value="3" />
Hello world!
</label>
focus-within and a transition hack can approximate this. The transition is to make sure the style is kept even if you click outside.
label {
font-weight: 400;
transition:0s 999s;
}
label:focus-within {
font-weight: 900;
transition:0s;
}
<label for="radio-3">
<input type="radio" id="radio-3" value="3" >
Hello world!
</label>
On html, it is needed to cover Hello World! into html tag like <span> and on CSS you can select that span next to checked input using + CSS selector.
input[type="radio"]:checked + span {
font-weight: bold;
}
<label for="radio-foobar">
<input type="radio" id="radio-3" value="3" />
<span>Hello world!</span>
</label>
Related
I have a number of [input type checkbox] with corresponding labels, for example:
<div>
<input id="idOne" type="checkbox" checked>
<input id="idTwo" type="checkbox">
</div>
<div>
<label for="idTwo">One</label>
<label for="idTwo">Two</label>
</div>
The label/input are connected with the [for] property. I need to style the lable based on the [checked]-status of the checkbox. Can this be done WITHOUT a combinator as the structure makes using child/sibling combinators a poor choice.
Somthing along the lines of:
label[input:checked = "true"]{
color:pink;
}
Can this be done in a stable fashion with css or will I need to add/remove a classs with JS?
THX in advance :)
I have tried to write a selector that will target the label of a checked input element (type="checkbox").
Yes, you can apply CSS to the label on the input checked status.
input[type=checkbox] + label {
color: #ccc;
font-style: italic;
}
input[type=checkbox]:checked + label {
color: #0964aa;
font-style: normal;
}
<input type="checkbox" id="idname" name="cb_name">
<label for="idname">CSS is Awesome</label>
This question already has answers here:
Style disabled button with CSS
(11 answers)
Closed 3 years ago.
I have form that I would like the save button to be disabled with different color. It is disabled since I cannot click on it, but I would like the color to be changed as well until all fields are completed.
Currently the color is blue, when it is disabled and enabled. But I would like it to change based on condition.
<div class="medium-6 columns" *ngIf="!isLoading else updateLoading">
<button md-button class="saves" type="submit" (click)="onSave()"
[disabled]="!editCardForm.valid">Save</button>
</div>
.saves {
height: 2.375rem;
width: 5.375rem;
border-radius: 1.1563rem;
color: white;
background-color: #00B8E6;
margin-left: 0.2rem;
}
You can do this with form validation if your fields are inside a form for example. Here is a quick demo of how that can be achieved.
form:valid .button {
background : green;
}
<form>
<label for="username"><b>Username:</b></label>
<input id="username" type="text" placeholder="Username" required/><br/>
<label for="password"><b>Password:</b></label>
<input id="password" type="password" placeholder="Password" required/><br/>
<input class="button" type="submit" value="Login"/><br/>
</form>
The button will only get green, if the inputs have text, as required.
I had to put the button.
button.saves:disabled {
background-color: green;
}
I am working with a bootstrap template and its checkbox template is like this:
<div class="checkbox">
<label>
<input type="checkbox" class="checkbox style-1" checked="checked">
<span>Checkbox 1</span>
</label>
</div>
I need an MVC EditorTemplate for boolean values to use this template.
MVC CheckBoxFor default template is not like this template, it has another hidden input field to hold data and there is no span to show checkbox icon (it uses a default icon not stylable by css).
MVC CheckBoxFor default template :
<input checked="checked" data-val="true" data-val-required="required." id="IsActive"
name="IsActive" type="checkbox" value="true">
<input name="IsActive" type="hidden" value="false">
I tried many ways to do this with no success. For example if I use a conditional template like below, it does not return value after submit.
My Boolean EditorTemplate:
#model Boolean?
<div class="checkbox">
<label>
#if (Model.Value)
{
<input id="#ViewData.TemplateInfo.GetFullHtmlFieldId("")" name="#ViewData.TemplateInfo.GetFullHtmlFieldId("")"
type="checkbox" class="checkbox style-1" checked="checked" value="true" />
}
else
{
<input id="#ViewData.TemplateInfo.GetFullHtmlFieldId("")" name="#ViewData.TemplateInfo.GetFullHtmlFieldId("")"
type="checkbox" class="checkbox style-1" value="false" />
}
<span>#Html.LabelFor(m => m)</span>
</label>
</div>
Can anyone help please?
Update:
A part of css codes relevent to checkbox icon :
label input[type=checkbox].checkbox + span:before {
font-family: FontAwesome;
font-size: 12px;
border-radius: 0;
content: " ";
display: inline-block;
text-align: center;
vertical-align: middle;
padding: 1px;
height: 12px;
line-height: 12px;
min-width: 12px;
margin-right: 5px;
border: 1px solid #bfbfbf;
background-color: #f4f4f4;
font-weight: 400;
margin-top: -1px;
}
label input[type=checkbox].checkbox + span:before {
content: " ";
}
label input[type=checkbox].checkbox:checked + span:before {
content: "";
color: #2e7bcc;
}
label input[type=checkbox].checkbox:checked + span {
font-weight: 700;
}
The CheckBoxFor() method generate 2 inputs to ensure a value is posted back (unchecked checkboxes to not submit a value so the hidden input ensures false is submitted), and you should not attempt to change this behavior. Your attempt at an EditorTempate could not work for a number of reasons including a checkbox (which has 2 states) cannot bind to a nullable bool (which has 3 states) and your else block means that a vale of false will always be submitted, even if the checkbox is checked.
Instead, use the CheckBoxFor() method, but adjust your css selectors
<div class="checkbox">
<label>
#Html.CheckBoxFor(m => m.IsActive, new { #class = "checkbox style-1" })
<span>Checkbox 1</span>
</label>
</div>
will generate
<div class="checkbox">
<label>
<input type="checkbox" name="IsActive" class="checkbox style-1" ... value="true">
<input type="hidden" name="IsActive" value="false">
<span>Checkbox 1</span>
</label>
</div>
So your current selector
label input[type=checkbox].checkbox + span:before {
which gets the span element placed immediately after the checkbox element needs to be changed to
label input[type=checkbox].checkbox ~ span:before {
And ditto for the other selectors (i.e. change + to ~). The ~ selector matches the second element if it is preceded by the first, and both share a common parent (refer General sibling selectors)
I have a drop down that contains options. I would like to partially break & bold some text as well as insert context breaks. I tried using CSS as well as HTML tags but I'm unable to get it. Can someone please suggest a solution?
Thanks in advance
I know this question is a bit old (or not new at least), but I'd like to show a very simple way to emulate a select element rather than using a "replacement plugin" as suggested in How to style the option of a html “select”?.
There are probably many, MANY ways to do this, but I try to keep things extremely simple, so my method of emulation only uses CSS. It is rather bare bones, but I'd like to point out that it is not a complicated thing to do so you might not need a plug in to do it.
Note1: Instead of using <option>, I used <label>. Since <label> is an interactive element, putting something interactive inside (like a <button>) would probably mess it up. Options are normally non-interactive anyway, but just be aware that this simple emulation can't do everything.
Note2: If you want to be able to select multiple options, just do a search for "radio" and replace with "checkbox".
Emulating Select Using Radio - No Collapse
input[type="radio"] {
display: none;
}
input[type="radio"]:checked + label {
background-color: black;
color: #28AADC;
}
/* none functional styles. just regular styling */
.radio_select {
background-color: #28AADC;
display: inline-block;
}
<div class="radio_select">
<div>
<input id="rad1" type="radio" name="radio_select" />
<label for="rad1">Option 1</label>
</div>
<div>
<input id="rad2" type="radio" name="radio_select" checked="checked" />
<label for="rad2">Option 2</label>
</div>
<div>
<input id="rad3" type="radio" name="radio_select" />
<label for="rad3">Option 3</label>
</div>
</div>
Radio select emulation - with collapse
Note: this won't work for mobile devices since it uses :hover.
input[type="radio"] {
display: none;
}
/* style this to your heart's content */
input[type="radio"] + label {
display: none;
}
input[type="radio"]:checked + label {
background-color: black;
color: #28AADC;
display: inline-block;
}
.radio_select:hover label {
display: inline-block;
}
/* none functional styles. just regular styling */
.radio_select {
background-color: #28AADC;
display: inline-block;
}
<!-- NOTE: This technique uses hover, so it won't work for mobile devices.
I couldn't think of a pure CSS way to solve that. Sorry. -->
<div class="radio_select">
<div>
<input id="rad1" type="radio" name="radio_select" />
<label for="rad1">Option 1</label>
</div>
<div>
<input id="rad2" type="radio" name="radio_select" />
<label for="rad2">Option 2</label>
</div>
<div>
<input id="rad3" type="radio" name="radio_select" checked="checked" />
<label for="rad3">Option 3</label>
</div>
</div>
This question already has answers here:
How do I stop <div> tags interfering with counters?
(2 answers)
Closed 7 years ago.
I am trying to use CSS counters to be applied to a series of elements and I miserably fail to get it right.
The HTML code is very simple:
body {
counter-reset: objgen;
}
span.general:before {
content: counter(objgen);
counter-increment: objgen;
}
span.general {
counter-reset: objesp;
font-weight: bold;
}
span.esp:before {
content: counter(objgen) "." counter(objesp);
counter-increment: objesp;
}
span.esp {
font-weight: bold;
}
<p>inputs: </p>
<p><span class="general"></span> <input type="text" value="test1"></p>
<p><span class="esp"></span> <input type="text" value="test2"></p>
<p><span class="esp"></span> <input type="text" value="test3"></p>
<p><span class="general"></span> <input type="text" value="test4"></p>
<p><span class="esp"></span> <input type="text" value="test5"></p>
<p><span class="esp"></span> <input type="text" value="test6"></p>
The objgen counter runs OK but the objesp never increments its value: it is always equal to one. What am I doing wrong?
Is the problem coming from the fact that the span with class "esp" is not nested within the span with class "general"?
COMMENT
It seems that as pointed by Paulie_D the problem is with the structure, the following HTML works with no problem (it is not the only possibility):
<span class="general"></span><input type="text" value="test1">
<span class="esp"></span><input type="text" value="test2">
<span class="esp"></span><input type="text" value="test3">
<span class="general"></span><input type="text" value="test1">
<span class="esp"></span><input type="text" value="test2">
<span class="esp"></span><input type="text" value="test3">
you are using class wrong. you don't need to assign the element span if you already assigned the element a class.
So instead of
span.general -> .general
That might solve your problem.
body {
counter-reset: objgen;
}
.general::before {
content: counter(objgen) ;
counter-increment: objgen;
}
.general {
counter-reset: objesp;
font-weight: bold;
}
.esp::before {
content: counter(objgen) "." counter(objesp);
counter-increment: objesp;
}
.esp {
font-weight: bold;
}
how about this?