I'm making a vote system and here's my code. It works fine under Firefox, but it's not working properly under Chrome and I don't know what's the problem with it.
Under Firefox when you hover over each square the previous are selected.
Under Chrome to select the first one you need to point over the second square and so on.
One more thing, if you click over the fifth box despite its not colored the link is working.
http://jsfiddle.net/SV8Dh/
<div id="vote-stars">
<input type="radio" name="stars" id="5" class="but" value="5" />
<label for="5">5</label>
<input type="radio" name="stars" id="4" class="but" value="4" />
<label for="4">4</label>
<input type="radio" name="stars" id="3" class="but" value="3" />
<label for="3">3</label>
<input type="radio" name="stars" id="2" class="but" value="2" />
<label for="2">2</label>
<input type="radio" name="stars" id="1" class="but" value="1" />
<label for="1">1</label>
</div>
Some css:
input[type="radio"]{
display:none;
}
.but + label
{
width: 23px;
height: 23px;
background-color:gray;
display:inline-block;
padding: 0 0 0 0px;
float: left;
border:1px;
border-style: groove;
border-color: yellow;
}
.but:hover + label,
.but:hover ~ .but + label,
.but:hover ~ label {
width: 23px;
height: 23px;
background-color:green;
display:inline-block;
padding: 0 0 0 0px;
margin: 0px;
}
.but:checked + label,
.but:checked ~ .but + label,
.but:checked ~ label {
width: 23px;
height: 23px;
background-color:green;
display:inline-block;
padding: 0 0 0 0px;
margin: 0px;
border:2px;
border-style: groove;
border-color: green;
}
Cheers
Seems it is caused by changing the display type of the radio buttons to none and Chrome has no idea to trigger :hover for the hidden element.
As an alternative, you can use :hover pseudo-class for the labels instead.
label:hover,
label:hover ~ label {
width: 23px;
height: 23px;
background-color: green;
display: inline-block;
padding: 0;
margin: 0;
}
Working Demo.
Or you can simple change Radio Button to visibility:hidden;
Related
I am using the below filter to sort a list:
<fieldset class="groups">
<h4 class="cufon_headings">Groups</h4>
<div class="checkbox">
<input type="checkbox" value="member1">
<label>Member 1</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="member2">
Member 2</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="member3">
Member 3</label>
</div>
</fieldset>
This is my CSS for the above filter:
/* Checkbox Styles*/
fieldset {
display: inline-block;
vertical-align: top;
margin: 0 1em 0 0;
background: #fff;
padding: .5em;
border-radius: 3px;
}
.checkbox{
display: block;
position: relative;
cursor: pointer;
margin-bottom: 8px;
}
.checkbox input[type="checkbox"]{
position: absolute;
display: block;
top: 0;
left: 0;
height: 100%;
width: 100%;
cursor: pointer;
margin: 0;
opacity: 0;
z-index: 1;
}
.checkbox label{
display: inline-block;
vertical-align: top;
text-align: left;
padding-left: 2em;
}
.checkbox label:before,
.checkbox label:after{
content: '';
display: block;
position: absolute;
}
.checkbox label:before{
left: 0;
top: 0;
width: 18px;
height: 18px;
margin-right: 10px;
background: #ddd;
border-radius: 3px;
}
.checkbox label:after{
content: '';
position: absolute;
top: 4px;
left: 4px;
width: 10px;
height: 10px;
border-radius: 2px;
background: #E50082;
opacity: 0;
pointer-events: none;
}
.checkbox input:checked ~ label:after{
opacity: 1;
}
.checkbox input:focus ~ label:before{
background: #eee;
}
The first checkbox (Member 1) is correctly styled, i.e. checking the first option marks the checkbox magenta. In this example the tag is outside of the tags.
The other chekcbox options (Member 2 and Member 3) do not turn magenta upon selecting them. With both the tag is inside the tag.
The preferred variant is having the tags inside the tags. However, I could not figure out how to adapt the CSS to get this working. Can anyone provide help? (Here is a link to the code on CopePen)
<fieldset class="groups">
<h4 class="cufon_headings">Groups</h4>
<div class="checkbox">
<input type="checkbox" value="member1">
<label>Member 1</label>
</div>
<div class="checkbox">
<input type="checkbox" value="member2">
<label>Member 2</label>
</div>
<div class="checkbox">
<input type="checkbox" value="member3">
<label>Member 3</label>
</div>
</fieldset>
Make sure that your labels are correct for member 2 and 3. You had the label tag including the input tag. The code above seems to work.
Charlie's answer is correct. In CSS, you can't affect a parent - only a child.
before and after are puesdo elements and they're not exactly acting like normal elements, so they're not siblings of input.
In order to solve your problem, Change every:
<div class="checkbox">
<label>
<input type="checkbox" value="memberN">
Member N
</label>
</div>
Into:
<div class="checkbox">
<input type="checkbox" value="memberN">
<label>
Member N
</label>
</div>
Thank you for your comments. It was intended that the first checkbox differs from the others to show the effect.
If it is not possible with CSS I guess I need to adapt how the plugin Contact Form 7 for Wordpress gives out the HTML for checkboxes. Not the preferred way to handle the issue.
the following works perfectly however I would like once the radio button is checked that it doesn't fill the all pink but less so that it looks like a normal radio button. Ideally it would have a nice grey circle equally centered.
.radio-toolbar input[type="radio"] {
display:none;
}
.radio-toolbar label {
display:inline-block;
background-color:#faa;
font-family:Arial;
font-size:16px;
padding:5px;
width:20px;
height:20px;
border-radius:50%;
}
.radio-toolbar input[type="radio"]:checked + label {
background-color:#333;
}
<div class="radio-toolbar">
<input type="radio" id="radio1" name="radios" value="all" checked>
<label for="radio1"></label>
<input type="radio" id="radio2" name="radios"value="false">
<label for="radio2"></label>
<input type="radio" id="radio3" name="radios" value="true">
<label for="radio3"></label>
</div>
You can do it using pseudo :after selector . Just add CSS in your existing CSS like this
CSS :
.radio-toolbar label:after{
content :'';
}
.radio-toolbar input[type="radio"]:checked + label:after {
width: 18px;
height: 18px;
display: block;
margin: 1px;
border-radius: 9px;
background-color: #333;
}
Created Fiddle Fiddle
Here is the code:
.tabs {
float: right;
position: relative;
min-height: 140px;
margin: 25px 0;
width: 500px;
}
.tab {
float: left;
}
.tab label {
background: #eee;
padding: 10px;
border: 1px solid #ccc;
margin-left: -1px;
position: relative;
left: 1px;
}
.tab [type=radio] {
display: none;
}
.content {
position: absolute;
top: 28px;
left: 0;
background: white;
right: 0;
bottom: 0;
padding: 20px;
border: 1px solid #ccc;
}
[type=radio]:checked ~ label {
background: white;
border-bottom: 1px solid white;
z-index: 2;
}
[type=radio]:checked ~ label ~ .content {
z-index: 1;
}
HTML structure:
<div class="tabs">
<div class="tab">
<input type="radio" id="tab-1" name="tab-group-1" checked>
<label for="tab-1">Tab-1</label>
<div class="content">
bla-bla1
</div>
</div>
<div class="tab">
<input type="radio" id="tab-2" name="tab-group-1" checked>
<label for="tab-2">Tab-2</label>
<div class="content">
bla-bla2
</div>
</div>
</div>
This code makes the second tab is active. But I need the first tab. I don't really get in my mind what attributes should I change. The code structure for all tabs is the same, only the "id" attribute is different. If I add third tab, third tab will be active.
Here you go: Fiddle
HTML:
<input type="radio" id="tab-2" name="tab-group-1" /> // remove checked
Explanation: Since you have checked attributes applied to both input.
Your tabs have radios:
<input type="radio" id="tab-2" name="tab-group-1" checked>
remove checked from all radios except first.
Demo Link
Only one tab at one time may be active.
When a tab is clicked it becomes an active tab.
If you need first tab to make active, add checked to only first tab. remove checked from others.
<input type="radio" id="tab-2" name="tab-group-1" checked/>
im trying to create a star rating system, i just need to focus on the css part of it at the moment.
it fills the stars as the user hovers over with the mouse, but it does it right to left and i want to make it work left to right.
Can someone show me what i'd need to change to do this. thanks.
<span class="rating">
<input type="radio" class="rating-input"
id="rating-input-1-5" name="rating-input-1">
<label for="rating-input-1-5" class="rating-star"></label>
<input type="radio" class="rating-input"
id="rating-input-1-4" name="rating-input-1">
<label for="rating-input-1-4" class="rating-star"></label>
<input type="radio" class="rating-input"
id="rating-input-1-3" name="rating-input-1">
<label for="rating-input-1-3" class="rating-star"></label>
<input type="radio" class="rating-input"
id="rating-input-1-2" name="rating-input-1">
<label for="rating-input-1-2" class="rating-star"></label>
<input type="radio" class="rating-input"
id="rating-input-1-1" name="rating-input-1">
<label for="rating-input-1-1" class="rating-star"></label>
</span>
css:
<
style>
.rating {
overflow: hidden;
display: inline-block;
}
.rating-input {
position: absolute;
left: 0;
top: -50px;
}
.rating-star {
display:inline-block;
width: 30px;
height: 30px;
background: url('assets/img/icons/stars.png') 0 0px;
background-repeat:no-repeat;
background-size: 22px 20px;
}
.rating-star:hover {
background-position: 0 16;
background: url('assets/img/icons/favorites.png') 0 0px;
background-size: 22px 20px;
}
.rating-star:hover,
.rating-star:hover ~ .rating-star,
.rating-input:checked ~ .rating-star {
background-position: 0 0;
background: url('assets/img/icons/favorites.png') 0 0px;
background-size: 22px 20px;
background-repeat:no-repeat;
}
</style>
Simply inverse the star order (in your mark-up too):
.rating-star {
float:right;
margin-right: 5px;
}
I have a table with background image shown in my site. The FF and chrome looks normal but not in IE. The background image seems to shift and generate wired result. I was wondering if anyone here can help me out on this one. Please see attached picture. Thanks for the help.
<section>
some html....
<form action="http://localhost/jobSearch/add_project/validate" method="post" accept-charset="utf-8">
<fieldset>
<legend>ADD NEW PROJECT</legend>
<label>Parcel</label>
<input type="text" name="parcel" value="">
<label>Lot Number</label>
<input type="text" name="lot_number" value="">
<label>Block</label>
<input type="text" name="block" value="">
<label>Subdivision</label>
<input type="text" name="subdivision_name" value="">
<label>Section/Phase</label>
<input type="text" name="section_phase" value="">
<input type="submit" name="submit" value="Add Project" id="submit">
</fieldset>
</form>
more html.....
</section>
CSS:
form {
display: block;
}
form fieldset {
font: bold 1.1em helvetica;
}
form label{
float:left;
display:block;
width:140px;
font:bold 1.1em Helvetica;
margin:5px;
}
fieldset{
color:black;
font:bold 1.2em Helvertica;
width:400px;
margin: 20px auto;
padding: 10px;
border:1px solid grey;
background:url('../images/background.jpg');
}
form input {
font-size: .9em;
padding: 4px 6px;
border: solid 1px #AACFE4;
margin: 5px;
width: 200px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}
form #submit {
cursor: pointer;
font: bold 1em Helvetica;
padding: 4px 2px;
border: solid 1px #AACFE4;
margin: 5px;
width: 100px;
}
Your tags are not properly nested. You open with <form>, but close with </fieldset>. You need to swap the locations of the closing tags in the example below to correct the nesting issue.
<form ...>
<fieldset>
<!-- content removed -->
</form>
</fieldset>