Disabled pseudo-class not working after minification - css

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?

Related

Angular component with custom validation

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;
}

How to create an EditorTemplate for bootstrap checkbox?

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)

Styling option tags

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>

Validating check boxes in HTML

I have a form there are 4 options (they may be checkbox or radio).
I want to select multiple options but one is compulsory.
I know it is possible in JS/jQuery but I want a HTML/CSS based solution.
To be able to check multiple inputs, they must be checkboxes. (They could be radio buttons with different names, but you wouldn't be able to uncheck them once checked.)
So use checkboxes, and show the Submit button only if any are checked, using the general sibling selector (~):
input[type="Submit"] {
display: none;
}
input:checked ~ input[type="Submit"] {
display: inline;
}
<input id="c1" type="checkbox"><label for="c1">First</label><br>
<input id="c2" type="checkbox"><label for="c2">Second</label><br>
<input id="c3" type="checkbox"><label for="c3">Third</label><br>
<input id="c4" type="checkbox"><label for="c4">Fourth</label><br>
<input type="Submit">
If you want the appearance of a disabled submit button, add a second button that is disabled.
When no input is clicked, show the disabled submit button only. When one or more inputs are clicked, show the enabled submit button only:
input[type="Submit"]:not([disabled]) {
display: none;
}
input:checked ~ input[type="Submit"]:not([disabled]) {
display: inline;
}
input:checked ~ input[disabled] {
display: none;
}
<input id="c1" type="checkbox"><label for="c1">First</label><br>
<input id="c2" type="checkbox"><label for="c2">Second</label><br>
<input id="c3" type="checkbox"><label for="c3">Third</label><br>
<input id="c4" type="checkbox"><label for="c4">Fourth</label><br>
<input type="Submit" disabled>
<input type="Submit">
Further to the answer of #Rick Hitchcock, I think that you will want to show to the user the button submit but it will disabled until one of the checkboxes will be checked.
If so, you can use pointer-events (in all modern browsers: http://caniuse.com/#feat=pointer-events) like this:
input[type="Submit"] {
opacity:0.5;
pointer-events:none;
/* animation added for fancy ;) */
transition:all .2s ease;
}
input:checked ~ .button-wrapper input[type="Submit"] {
opacity:1;
pointer-events:all;
}
.button-wrapper {
position:relative;
display:inline-block;
}
.button-wrapper:before {
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:1;
}
input:checked ~ .button-wrapper:before {
display:none;
}
<input id="c1" type="checkbox"><label for="c1">First</label><br>
<input id="c2" type="checkbox"><label for="c2">Second</label><br>
<input id="c3" type="checkbox"><label for="c3">Third</label><br>
<input id="c4" type="checkbox"><label for="c4">Fourth</label><br>
<div class="button-wrapper">
<input type="Submit" tabindex="-1">
</div>
Edit I was added a "mask" in .button-wrapper:before so it will work in the old browsers.
You can do this in html5 using the required attribute
Like
<input type="checkbox" required name="your_checkbox_name">
This tells the browser that the form should not be to submitted without the checkbox being checked.Although i recommend java-script since not all browsers will be able to recognize this.
Or
If you want to detect if at least one check box is selected as suggested by #RickHitchcock in the comments,You could use
span {
display: inline;
color: red;
}
input[type="Submit"],
input:checked ~ span {
display: none;
}
input:checked ~ input[type="Submit"] {
display: inline;
}
<form action="#" method="post">
<input type="checkbox" />Checkbox 1
<br />
<input type="checkbox" />Checkbox 1
<br />
<input type="checkbox" />Checkbox 1
<br />
<input type="submit" value="Submit" /><span>! Please check at least one checkbox</span>
</form>
You can use the following for which one is compulsory.
<input type="radio" name="name" required>
Which one without required will not be tested if it is ticked or not.
Try This:
<input id="c3" type="checkbox" required><label for="c3">Third</label><br>
<input id="c4" type="checkbox" required><label for="c4">Fourth</label><br>
Or you can try this using jquery to validate a html checkbox:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Makes "field" always required. Nothing and blanks are invalid. </title>
<link rel="stylesheet" href="http://jqueryvalidation.org/files/demo/site-demos.css">
</head>
<body>
<form id="myform">
<label for="field">Required: </label>
<input type="text" class="left" id="field" name="field">
<br/>
<input type="submit" value="Validate!">
</form>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://jqueryvalidation.org/files/dist/jquery.validate.min.js"> </script>
<script src="http://jqueryvalidation.org/files/dist/additional- methods.min.js"></script>
<script>
// just for the demos, avoids form submit
jQuery.validator.setDefaults({
debug: true,
success: "valid"
});
$( "#myform" ).validate({
rules: {
field: {
required: true
}
}
});
</script>
</body>
</html>
required is the way html validates things

How to style a selected radio button AND include space as clickable?

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/

Resources