So I was reading CSS - How to Style a Selected Radio Buttons Label? here on SO and also this Q/A over on UX
I tried implementing both concepts and I can't seem to figure out how to do it, since a parent selector doesn't seem to exist. I'm sure one of you genii can help me.
Here's specifically the code I'm working with, but generic examples are fine:
<label for="ship-sfc-CNQM" class="checkboxLabel back">
<div class="shippingcontainer">
<input type="radio" name="shipping" value="sfc_CNQM" checked="checked" id="ship-sfc-CNQM">
<div class="back sfc_logos" id="CNQM" title="China Post"></div><div class="back sfcdaterange"><span class="sfcdateprefixlong">Estimated delivery between </span><span class="sfcdateprefixmed">Est. between </span><span class="sfcday">Wednesday </span><span class="sfclongmonth">November </span><span class="sfcshortmonth">Nov </span><span class="sfcdate">11</span><span class="sfcordinal">th</span><span class="sfclongseparator"> and </span><span class="sfcshortseparator"> - </span><span class="sfcday">Tuesday </span><span class="sfclongmonth">December </span><span class="sfcshortmonth">Dec </span><span class="sfcdate">1</span><span class="sfcordinal">st</span></div>
<div class="important forward">$0.00</div>
</div>
</label>
How do I style .checkboxLabel when its child radio button is checked?
If you restructure your HTML slightly you can do this with pure HTML and CSS. Something like this as a snippet:
HTML
<label for="ship-sfc-CNQM" class="radio">
<input type="radio" name="shipping" value="sfc_CNQM" id="ship-sfc-CNQM" />
<div class="radioStyle"></div>
<span>Here is the text</span>
</label>
CSS
.radio input { display: none; }
.radio .radioStyle {
display: inline-block;
width:20px; height:20px;
background: grey; }
.radio input:checked + .radioStyle { background: green; }
.radio span { display: inline-block; }
Here, you're using the :checked CSS selector to apply a rule to the following label field when it's selected.
Working fiddle: https://jsfiddle.net/w7tem94t/
Related
I have an Angular 5 component that is basically just a label and input
<div class="form-group">
<label for="wwid">WWID</label>
<input id="wwid" required ...lots of attrs...>
</div>
Using CSS I've then defined a style:
.ng-invalid:not(form) {
border-left: 5px solid #a94442; /* red */
}
When the field is blank, I'm getting two red borders. The one on the input field that I want, but also one to the right of the label that I do not want. How do I get rid of the red line on the label?
Here's the actual full HTML that used by the component.
<ng-template #listSelectionFormatter let-r="result">
<span>{{r.wwid}} - {{r.fullName}}</span>
</ng-template>
<div class="form-group">
<label *ngIf="labelText" for="wwid">
{{ labelText }}
<span *ngIf="isRequired"> <sup class="requiredIndicator">*</sup></span>
</label>
<!-- inputFormatter is the format for what is placed into the input field after choosing from the dropdown -->
<input id="wwid" type="text"
class="form-control"
placeholder="Search by WWID, IDSID, Name or Email"
(selectItem)="onWorkerSelected($event.item)"
(input)="onTextFieldChanged($event.target.value)"
[ngModel]="selectedWorker"
[ngbTypeahead]="search"
[inputFormatter]="selectedResultsFormatter"
[resultTemplate]="listSelectionFormatter"
[disabled]="disabled"
[required]="required"
/>
<span *ngIf="searching">searching…</span>
<div class="invalid-feedback" *ngIf="searchFailed">Lookup failed.</div>
</div>
The requiredIndicator thing is just for an older style I was using to show an asterisk if it was required, and used this CSS:
.requiredIndicator {
color: red;
font-size: larger;
vertical-align: baseline;
position: relative;
top: -0.1em;
}
currently I'm using the following plugin:
gulp-clean-css
This is my layout:
<div class="checkbox">
<label>
<input type="checkbox" disabled="disabled" checked="checked">
<span class="checkbox-material" style="margin-right: 10px">
<span class="check"></span>
</span>I'm supposed to be checked and disabled
</label>
</div>
Then in my CSS:
.checkbox input[type=checkbox]:checked+.checkbox-material .check {
color: #2196f3; // when the input's disabled is set to false
}
.checkbox input[type=checkbox][disabled]:checked+.checkbox-material .check{
color:#9E9E9E!important;cursor:not-allowed!important; // When the input is disabled
}
The issue is that when I run the code optimized, (minified) The second selector is not being taken in account. Although it exists on the stylesheet
Any ideas?
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>
HTML:
<label>
<input type="checkbox" />
</label>
<div>
stuff
</div>
I'd like to be able to style the DIV element depending on the checked state of the input, like
input ~ div{
display: none;
}
input:checked ~ div{
display: block;
}
Obviously the~ selector doesn't seem to work here. Neither does +
Is there any other solution (besides javascript) ?
Try this, im not sure what its cross browser compatibility is.
input:checked + div
{
background: #333;
height: 30px;
width: 30px;
}
This should work, but I wouldnt do it, I would do Javascript.
See my jsfiddle
Sadly there is no way to select an ancestor in pure CSS, which is what you would require to select an ancestor's sibling.
I have seen people surround other content with a label - while this is a very questionable practice, it would allow you to use the + selector to style the div:
<label>
<input type="checkbox" />
<div>
stuff
</div>
</label>
Edit:
Or this (thanks to #lnrbob for pointing it out)
<label for="myCheckbox">
This is my label
</label>
<input id="myCheckbox" type="checkbox" />
<div>
stuff
</div>
if any one need extra solution
<input id="myCheckbox" type="checkbox" />
<label for="myCheckbox"> This is my label</label>
<div>
show when check box is checked
</div>
and the css
#myCheckbox ~ label ~ div { display: none; }
#myCheckbox:checked ~ label ~ div { display: block; }
happy coding !!!
I need to create inline element to control collapsible element. I've created the following:
<label class="control-label" for="surname">Surname</label>
<div class="controls">
<input type="text" class="input-xlarge" id="surname">
<p class="help-block">Input your surname. <a data-toggle="collapse" data-target="#surname-more">More...</a></p>
<div id="surname-more" class="help-block collapse in">Additional information about surname will be here.</div>
</div>
So, such element is a here. But it looks bad (blue link within grey text). Is there any standard Twitter Bootstrap class, which should be used in such scenario?
Applying the help-block style to the link makes the "More..." text gray, but the link still shows the dark blue color when you hovered over the link.
I would write your own custom style to handle this:
.help-block-link {
color: #999;
}
.help-block-link:hover {
color: #333;
text-decoration: none;
cursor: pointer;
}
<a data-toggle="collapse" data-target="#surname-more" class="help-block-link">More...</a>