I am trying to override checkbox css in angular.js .It works fine for normal javascript code.
Plunker : https://plnkr.co/edit/gkWm0lgEZ7N88TINcsRS?p=preview
If you remove the css it works fine.
<input type="checkbox" ng-model="checkboxModel.value1" >
CSS:
input[type=checkbox]:checked + label:before {
content: '';
text-shadow: 1px 1px 1px #10758C;
font-size: 24px;
color: #f3f3f3;
text-align: center;
line-height: 24px;
background: url('http://cnt.in.bookmyshow.com/bmsin/SLIMG/1_4.gif') !important;
}
label {
display: inline-block;
cursor: pointer;
position: relative;
padding-left: 28px;
margin-right: 12px;
font-size: 16px;
line-height: 22px;
font-weight: bold;
}
input[type=radio], input[type=checkbox] {
display: none;
}
label:before {
font-weight: normal;
content: '';
display: inline-block;
width: 18px;
height: 18px;
margin-right: 10px;
position: absolute;
left: 0;
bottom: 1px;
background: url('http://cnt.in.bookmyshow.com/bmsin/SLIMG/1_1.gif?v1');
}
The issue is that the '+' css selector used, is unable to find any matching DOM i.e the label is wrapping the input and no label is present following/after the input, as per the DOM structure in the Plunker link .
Approach 1:
You could use the following DOM structure and modify your CSS to replace all occurrences of label to i
<label>
<input />
<i></i>
</label>
Approach 2:
You could use the following DOM structure and modify your CSS to replace all occurrences of label to input + label (To avoid css being applied to the wrapper label). [Note this approach needs the checkbox to have an id and for the label following it to have a for attribute.]
<label>
<input id="chk1" />
<label for="chk1"></label>
</label>
Hope this helps!
Related
.mainheading
{
font-weight: 700;
font-style: normal;
position: relative;
padding-bottom: 1.33333rem;
display: table;
line-height: 1.1;
}
.mainheading::after
{
content:'';
display: block;
position: absolute;
border-bottom: 2px solid #72bf44;
min-width: 110px;
width: 70%;
bottom: 0;
left: 0.2rem;
}
I am working on a reporting tool and I tried adding this css to the label
But the line-height is not working.
Suggest me where I went wrong
With your initial code you're basically creating a new HTML tag <Label> with an attribute Class. CSS can read the class and id with the selectors . and #. You can always select an attribute with the CSS attribute selector, in your case:
label[Class="mainheading"] {
/* style */
}
I recommend you stick with class and id instead of Class and ID, like so:
<label caption="Main Report" class="mainheading" id="lblDashboardsummary">Hello</label>
And in the CSS file just do
label.mainheading
.mainheading
{
font-weight: 700;
font-style: normal;
position: relative;
padding-bottom: 1.33333rem;
display: table;
line-height: 0;
}
.mainheading::after
{
content:'';
display: block;
position: absolute;
border-bottom: 2px solid #72bf44;
min-width: 110px;
width: 70%;
bottom: 0;
left: 0.2rem;
}
<label caption="Main Report" class="mainheading"
id="lblDashboardsummary">Your Text</label>
It is good coding practice to write HTML attributes in lowercase.
Hope this helps.
I have a jsfiddle here - https://jsfiddle.net/5qmnptuk/4/
I'm trying to craete a custom radio button.
Ive hidden the radio button and then created the new one with :after on the label.
I'm trying to use :checked to style the clicked but its not working
Can anyone see why this doesn't work.
.form-group{
margin-top: 30px;
}
label{
cursor: pointer;
display: inline-block;
position: relative;
padding-right: 25px;
margin-right: 15px;
}
label:after{
bottom: -1px;
border: 1px solid #aaa;
border-radius: 25px;
content: "";
display: inline-block;
height: 25px;
margin-right: 25px;
position: absolute;
right: -31px;
width: 25px;
}
input[type=radio]{
display: none;
}
input[type=radio]:checked + label{
content: \2022;
color: red;
font-size: 30px;
text-align: center;
line-height: 18px;
}
There are several problems with your code:
1 - Your input needs to be before the label
The + and ~ CSS selectors only select siblings after an element in the DOM, so you need to have the input before the label.
2 - Your label isn't assigned to the input
To assign the label, use the for attribute, and give the input an ID:
<div class="form-group">
<input type="radio" id="custom" />
<label for="custom">Label</label>
</div>
3 - The content for the pseudo element is missing quotes.
4 - You aren't applying the styles to the after element of the label, you were applying them to the label directly:
input[type=radio]:checked + label{
content: \2022;
color: red;
font-size: 30px;
text-align: center;
line-height: 18px;
}
Selects the label, while:
input[type=radio]:checked + label:after{
content: "\2022";
color: red;
font-size: 30px;
text-align: center;
line-height: 18px;
}
Selects the after element
Updated, working JSFiddle
Updated fiddle where I've added id for the radio and label needs
for="radioId"
to be able to work like that
also the label needs to be after the radio button
I am trying to use the Font Awesome Map Marker in a Google Autocomplete Input. My goal is to have the Map Marker to the left of the placeholder text, be able to add a color to just the map marker, and to have it always present even when the user is typing. So far I have tried:
<span class="google-address-bar"><input #pacinput id="pac-input" class="form-control" type="text" placeholder=" Enter Your Street Address">
</span>
with :
#pac-input {
font-family: Fira-Sans, FontAwesome, Serif;
background-color: #fff;
width: 400px;
height: 45px;
font-size: 15px;
font-weight: 300;
text-overflow: ellipsis;
}
but with this solution I am unable to add color to just the Map Marker and since it is placeholder, it disappears once the input is dirty. Has anyone accomplished this?
Use a <label> or <i> for the Font Awseome part and then position then icon over the input. Then all that is required is adjusting the padding.
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
margin: 0;
padding: 0;
}
.google-address-bar {
position: relative;
}
.google-address-bar i.fa {
color: red;
position: absolute;
height: 45px;
line-height: 45px;
padding-left: .5em;
}
#pac-input {
font-family: Fira-Sans, Serif;
background-color: #fff;
width: 400px;
height: 45px;
font-size: 15px;
font-weight: 300;
padding-left: 1.5em;
text-overflow: ellipsis;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<span class="google-address-bar"><i class="fa fa-map-marker"></i>
<input #pacinput id="pac-input" class="form-control" type="text" placeholder=" Enter Your Street Address">
</span>
In bootstrap we can prepend an input using the following code:
<div class="input-prepend">
<span class="add-on">#</span>
<input type="text">
</div>
I want to achieve exactly the same thing in jQuery Mobile, but without using bootstrap.
I can see that the relevant CSS code from bootstrap is as follows:
.input-prepend {
display: inline-block;
font-size: 0;
margin-bottom: 10px;
vertical-align: middle;
white-space: nowrap;
}
.input-prepend .add-on {
background-color: #EEEEEE;
border: 1px solid #CCCCCC;
display: inline-block;
font-size: 14px;
font-weight: normal;
height: 20px;
line-height: 20px;
min-width: 16px;
padding: 4px 5px;
text-align: center;
text-shadow: 0 1px 0 #FFFFFF;
width: auto;
}
After adding these to my custom CSS, I still couldn't figure out what's missing. But certainly something is missing.
Can someone please guide me.
Here is the example fiddle: http://jsfiddle.net/LittleLebowski/Mgq9W/
Leave the rest of the css the same, but add this to .input-prepend .add-on rule. You could also use vertical-align:top. I tested it using your fiddle link.
.input-prepend .add-on {
vertical-align: bottom;
}
You could also try adding..
.input-prepend input {
position: relative;
margin-bottom: 0;
vertical-align: top;
}
I have a checkbox that I am styling by hiding the input and targetting a span nested in a label. See http://jsfiddle.net/rz6np/
HTML:
<input id="confirm" type="checkbox" name="confirm" value="1" required="required" />
<label for="confirm"><span>+</span>Confirm</label>
CSS:
input[type="checkbox"] {
display: none;
}
form input[type="checkbox"] + label span {
display: inline-block;
width: 16px;
height: 16px;
margin: 1px 10px 5px 0;
vertical-align: middle;
cursor: pointer;
border: 1px solid grey;
color: #fff;
font-size: 15px;
padding: 2px 2px;
}
input[type="checkbox"]:checked + label span {
color: #000;
}
As the input is hidden it means the html5 required pop-up doesn't display. Is there a way to force it to display?
Assuming the design looks like this or similar to this, don't use display: none. The styled checkbox is large enough to cover it, so just position it over the checkbox with position relative or absolute, and appropriate z-index.
If it won't cover it completely, you could still get away with using visibility:hidden on the checkbox. I still see the popup in Firefox even though the field is invisible, but you'll need to check other browsers and how they behave.
input and span should be inside the label:
<label for="confirm">
<input id="confirm" type="checkbox" name="confirm" value="1" required="required" />
<span>+</span>
Confirm
</label>
Then on input:
label {
position: relative;
}
label > input[type="checkbox"] {
opacity: 0;
position: absolute;
top: 0;
left: 0;
}