I m creating custom checkbox and radio button in pure css but they are not showing perfectly in IE7 .
any body help in
code is there please check it
HTML
<ul>
<li>
<fieldset>
<legend id="title1" class="desc">
Select a Choice
</legend>
<div>
<span>
<input id="Field1_0" name="Field1" type="radio" class="field radio" checked="checked">
<label class="choice" for="Field1_0">
First Choice</label>
</span>
<span>
<input id="Field1_1" name="Field1" type="radio" class="field radio">
<label class="choice" for="Field1_1">
Second Choice</label>
</span>
<span>
<input id="Field1_2" name="Field1" type="radio" class="field radio">
<label class="choice" for="Field1_2">
Third Choice</label>
</span>
</div>
</fieldset>
</li>
<li>
<fieldset>
<legend id="title2" class="desc">
Check All That Apply
</legend>
<div>
<span>
<input id="Field2" name="Field2" type="checkbox" class="field checkbox" checked="checked">
<label class="choice" for="Field2">First Choice</label>
</span>
<span>
<input id="Field3" name="Field3" type="checkbox" class="field checkbox">
<label class="choice" for="Field3">Second Choice</label>
</span>
<span>
<input id="Field4" name="Field4" type="checkbox" class="field checkbox">
<label class="choice" for="Field4">Third Choice</label>
</span>
</div>
</fieldset>
</li>
</ul>
Css
li:not(#foo) > fieldset > div > span > input[type='radio'],
li:not(#foo) > fieldset > div > span > input[type='checkbox']
{
opacity: 0;
float: left;
width: 18px;
}
li:not(#foo) > fieldset > div > span > input[type='radio'] + label,
li:not(#foo) > fieldset > div > span > input[type='checkbox'] + label {
margin: 0;
clear: none;
padding: 5px 0 4px 24px;
/* Make look clickable because they are */
cursor: pointer;
background: url(https://css-tricks.com/wufoo/themes/customradiosandcheckboxes/off.png) left center no-repeat;
}
li:not(#foo) > fieldset > div > span > input[type='radio']:checked + label {
background-image: url(https://css-tricks.com/wufoo/themes/customradiosandcheckboxes/radio.png);
}
li:not(#foo) > fieldset > div > span > input[type='checkbox']:checked + label {
background-image: url(https://css-tricks.com/wufoo/themes/customradiosandcheckboxes/check.png);
}
Live demo here http://jsfiddle.net/rohitazad/Vsvg2/79/
:checked is the property of css3 which not supported by IE8 & below browsers. But your can achieve this with http://selectivizr.com/ JS which support all css3 pseudo selector for IE
As pointed out, :checked is a css3 pseudoclass.
You could still use an attribute selector though like so:
input[type='checkbox'][checked='checked']
Related
I have a Vue app with a HTML Form with multiple sets of radio buttons.
I customized their appearance using the SO answer written here
However, when I click on any of the radio buttons, only the first set of radio buttons are affected, even when clicking a different set's radio button.
This is the html and css (JSFiddle link)
Any idea why this is happening?
Update: The problem was with the label tags - their for attribute was still set to the first set of radio buttons!
<div class="time_input" >
<div class="time_input__radio_group">
<div class="radio_group">
<input type="radio" name="start" id="am" :value="true" v-model="startInMorning">
<label class="radio_label" for="am">AM</label>
</div>
<div class="radio_group">
<input type="radio" name="start" id="pm" :value="false" v-model="startInMorning">
<label class="radio_label" for="pm">PM</label>
</div>
</div>
</div>
<div class="days_open_input">
<div class="radio_group" >
<input type="radio" name="days_open" id="one_day" :value="1" v-model="days_open" checked>
<label class="radio_label" for="am">1</label>
</div>
<div class="radio_group">
<input type="radio" name="days_open" id="two_days" :value="2" v-model="days_open">
<label class="radio_label" for="pm">2</label>
</div>
<div class="radio_group">
<input type="radio" name="days_open" id="three_days" :value="3" v-model="days_open">
<label class="radio_label" for="pm">3</label>
</div>
</div>
<div class="tracks_limit_input">
<div class="radio_group">
<input type="radio" name="tracks_limit" id="eight_songs" value="8" v-model="tracks_limit" >
<label class="radio_label " for="am">8</label>
</div>
<div class="radio_group">
<input type="radio" name="tracks_limit" id="sixteen_songs" value="16" v-model="tracks_limit" checked class="tracks_limit_input__margin">
<label class="radio_label" for="pm">16</label>
</div>
</div>
/* completely hiding radio button */
input[type="radio"] {
display: none;
}
/* simulate radiobutton appearance using pseudoselector */
input[type="radio"] + *::before {
content: "";
/* create custom radiobutton appearance */
display: inline-block;
width: 15px;
height: 15px;
padding: 3px;
margin-right: 5px;
/* background-color only for content */
background-clip: content-box;
border: 1px solid #bbbbbb;
background-color: #e7e6e7;
border-radius: 50%;
}
/* appearance of checked radiobutton */
input[type="radio"]:checked + label::before {
background-color: black;
}
/* resetting default box-sizing */
*,
*:before,
*:after {
box-sizing: border-box;
}
/* optional styles for centering radiobuttons */
.radio-group label {
display: inline-flex;
align-items: center;
}
I think there is no mistake with the css
The code you are using for the HTML is the one causes problem:
1st it is Vue code not pure HTML code
I will take the 1st group - the time example:
<div class="time_input" >
<div class="time_input__radio_group">
<div class="radio_group">
<input type="radio" name="start" id="am" :value="true" v-model="startInMorning">
<label class="radio_label" for="am">AM</label>
</div>
<div class="radio_group">
<input type="radio" name="start" id="pm" :value="false" v-model="startInMorning">
<label class="radio_label" for="pm">PM</label>
</div>
</div>
</div>
Both of inputs is set to the same model startInMorning so if it is true both checked and vice versa.
So the fix is:
first remove the v-model="startInMorning" for both
next change the :value
for the first one :value="startInMorning",
for the second one :value="!startInMorning"
Do similar for others
The problem seemed to be with the HTML!
The for attribute on the label tags was set to the wrong radio buttons
ie
<input type="radio" name="days_open" id="two_days" :value="2" v-model="days_open">
<label class="radio_label" for="pm">2</label>
<input type="radio" name="days_open" id="two_days" :value="2" v-model="days_open">
<label class="radio_label" for="pm">2</label>
I try to show and hide content using :checked class but it looks like not working in nested UL LI list. Any one guide me to solve this please. Look like I made some mistake which I am not able to see.
div#content {
display:none;
}
#show:checked ~ div#content{
display:block;
}
<ul>
<li>
<input type=radio id="show" name="group">
<label for="show">Show</label>
</li>
<li>
<input type=radio id="show1" name="group">
<label for="show1">Show</label>
</li>
<li>
<input type=radio id="show2" name="group">
<label for="show2">Show</label>
<li>
<input type=radio id="show3" name="group">
<label for="show3">Show</label>
</li>
<li>
<input type=radio id="show4" name="group">
<label for="show4">Show</label>
</li>
<li>
<input type=radio id="show5" name="group">
<label for="show5">Show</label>
</li>
</ul>
<div id="content">Content</div>
#content {
display: none;
}
.show:checked ~ #content {
display: block;
}
<input type="radio" name="show" id="show1" class="show">
<label for="show1">Show</label>
<input type="radio" name="show" id="show2" class="hide">
<label for="show2">Hide</label>
<div id="content">Contents here</div>
The ~ selector only targets sibling-level elements. Since your :checked input is nested, it's not actually siblings with the #content div. The ul and the div are siblings. The input and its label are siblings. And one li is a sibling with the next li. But to get from the input to the div#content, you have to go up a few levels in the dom. Thus, not siblings.
You'll have to either change how your markup is set up (see the snippet below for an example; I added the "hide" box just to make it easier to see the effect, but the important part is that the input and the div are siblings), or change how you're handling the hide/show behavior.
I have used display:flex to style a number of radio buttons so that they appear side by side, rather than in one long column. I thought by using margin:auto in combination with this, the child elements would appear grouped but in the center of the page horizontally. Clearly this isn't the case, so any help would be appreciated please.
Here is what I have currently:
input[type="radio"] {
display: none;
}
input[type="radio"]:checked + label {
background-color: red;
display: inline-block;
line-height: 4vw;
text-align: center;
width: 18vw;
}
label {
background-color: orange;
display: inline-block;
line-height: 4vw;
color: white;
text-align: center;
width: 18vw;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<section style="display:flex; margin:auto;">
<div>
<p>Amount:</p>
</br>
<input type="radio" name="Amount" id="Amount1" value="single" / checked>
<label for="Amount1">Amount 1</label>
</br>
</br>
<input type="radio" name="Amount" id="Amount2" value="multi" />
<label for="Amount2">Amount 2</label>
</div>
<span style="width:5vw;display:inline-block"></span>
<div>
<p>Term:</p>
</br>
<input type="radio" name="Term" id="Term1" value="0" / checked>
<label for="Term1">Term 1</label>
</br>
</br>
<input type="radio" name="Term" id="Term2" value="1" />
<label for="Term2">Term 2</label>
</div>
<span style="width:5vw;display:inline-block"></span>
<div>
<p>Phone:</p>
</br>
<input type="radio" name="Phone" id="Phone1" value="0" / checked>
<label for="Phone1">Phone 1</label>
</br>
</br>
<input type="radio" name="Phone" id="Phone2" value="1" />
<label for="Phone2">Phone 2</label>
</div>
</section>
I have used viewport width throughout the project, as I have further CSS styling to change element sizes based on media queries. So I need a solution that still keeps this styling if possible.
Using the following should help:
justify-content: center
On the display:flex class.
Source: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
HTML:
<fieldset>
<legend> XXX </legend>
<label for="photo"> Photo </label>
<input type="file" name="photo" id="photo">
<br>
<label for="imagePreview"> Preview: </label>
<img id="preview">
</fieldset>
CSS:
// 1. In this order, only input:hover works.
label:hover { font-size: 25px;}
input:hover { font-size: 20px;}
// 2. In this order, only label:hover works.
input:hover { font-size: 20px;}
label:hover { font-size: 25px;}
I was asked to do both should resize their font-size.
eg: Hovering on label, should change its font-size.
Hovering on input, should change its font-size as well.
Why not both changing the font-size?
How can I achieve it?
fieldset { font-size: 20px;}
label:hover , input:hover { font-size: 25px;}
<fieldset>
<legend> XXX </legend>
<label for="photo"> Photo </label>
<input type="file" name="photo" id="photo">
<br>
<label for="imagePreview"> Preview: </label>
<img id="preview">
</fieldset>
You mean something like this
fieldset { font-size: 20px;}
fieldset:hover label,fieldset:hover input { font-size: 25px;}
<fieldset>
<legend> XXX </legend>
<label for="photo"> Photo </label>
<input type="file" name="photo" id="photo">
<br>
<label for="imagePreview"> Preview: </label>
<img id="preview">
</fieldset>
I have the following HTML code:
<div>
<p><label>Faculty <input type="text" class = "f"></label></p>
<p><label >Department<input type="text" class = "f"></label></p>
</div>
How can I make textboxes appear one under another without shifting?
You could do it with inline-block, additional <span> tags added.
div > p > label > span {
display: inline-block;
width: 90px;
}
<div>
<p>
<label>
<span>Faculty</span>
<input type="text" class="f" />
</label>
</p>
<p>
<label>
<span>Department</span>
<input type="text" class="f" />
</label>
</p>
</div>
Or, the css table way.
div > p > label {
display: table;
table-layout: fixed;
}
div > p > label > span {
display: table-cell;
}
div > p > label > span:first-child {
width: 90px;
}
<div>
<p>
<label>
<span>Faculty</span>
<span><input type="text" class="f" /></span>
</label>
</p>
<p>
<label>
<span>Department</span>
<span><input type="text" class="f" /></span>
</label>
</p>
</div>
give a left margin to your input field for faculty