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;
}
Related
I have the following form:
body {
background: #fff;
color: 404040
}
form {
display: block;
position: relative;
width: 80%;
background: #f9f9f9;
margin: 10px auto;
padding: 30px;
}
label {
display: block;
position: relative;
top: -20px;
left: 0px;
color: #999;
font-family: 'Helvetica', sans-serif;
font-size: 16px;
z-index: 1;
transition: all 0.3s ease-out;
}
input,
input:optional {
display: block;
position: relative;
background: none;
border: none;
border-bottom: 1px solid #ddd;
width: 100%;
font-family: 'Helvetica', sans-serif;
font-weight: bold;
font-size: 16px;
z-index: 2;
}
input:focus,
input:valid {
outline: none;
border-bottom: 1px solid #00aced;
}
input:focus+label,
input:required:valid+label {
top: -40px;
font-size: 11px;
color: #00aced;
}
.divider {
position: relative;
height: 30px;
width: auto;
background: none;
}
#hex1 {
width: 75px;
margin: 10px auto;
}
.headline {
margin-left: 100px;
font-size: 24px;
}
.submitBtn {
width: 250px;
height: 75px;
border-radius: 3px;
background: #37afac;
margin: 0 auto;
color: #fff
}
#title {
margin-top: -60px;
margin-left: 80px;
margin-bottom: 20px;
}
<form>
<h3>Details about the person you are reporting:</h3>
<div class='divider'></div>
<input type="text" name="firstname" required autocomplete="off" />
<label for="firstname">First Name</label>
<div class='divider'></div>
<input type="text" name="lastname" required autocomplete="off" />
<label for="lastname">Last Name</label>
<div class='divider'></div>
<input type="text" name="age" class="test" autocomplete="off" />
<label for="age">Age</label>
<div class='divider'></div>
<input type="text" name="gender" required autocomplete="off" />
<label for="gender">Gender</label>
<div class='divider'></div>
<input type="text" name="address 1" autocomplete="off" />
<label for="address1">Address 1</label>
<div class='divider'></div>
<input type="text" name="address 2" autocomplete="off" />
<label for="address2">Address 2</label>
<div class='divider'></div>
<input type="text" name="city" required autocomplete="off" />
<label for="city">City</label>
<div class='divider'></div>
<input type="text" name="state" required autocomplete="off" />
<label for="state">State</label>
<div class='divider'></div>
<input type="text" name="position" autocomplete="off" />
<label for="Position">Position (coach, referee, etc)</label>
<div class='divider'></div>
<input type="text" name="program" required autocomplete="off" />
<label for="Program">Program where individual works</label>
<div class='divider'></div>
<input type="text" name="IncidentDescription" required autocomplete="off" />
<label for="IncidentDescription">Incident description</label>
<div class='divider'></div>
<input type="text" name="IncidentLocation" required autocomplete="off" />
<label for="IncidentLocation">Incident location</label>
<div class='divider'></div>
Codepen: https://codepen.io/anon/pen/PazrBw
As each input receives focus, it animates via receiving a class in css. Using basic html5 validation, it's supposed to retain that class to show that it's been properly filled out.
My problem is that I need some fields to be not required. When fields are not marked required, the form automatically applies some of the :valid pseudoclass (the blue underline). The even bigger issue is that when it loses focus, it loses that class and collapses the label back down onto the input text.
What am I missing here? thank you!
You are not missing anything, it all behaves the way it's supposed to be based on your code. So you need an alternative approach.
I suggest using :placeholder-shown selector instead of :valid. This way, empty optional fields will no longer get selected.
To make this work, you first need to add placeholder=" " to your inputs. This feels a bit hacky because this way you are losing the ability to use placeholders in case you need them but remember that you are already saying no to using placeholders by putting labels in their place (well, if you ever need to include placeholders for the sake of accessibility, do it, and instead of empty placeholders put real ones, then hide them with CSS. Another topic, another time).
:placeholder-shown does not have IE/old browser support so we'll go with a good example of progressive enhancement here:
Label text will be already minimised and positioned on top of the input as a default (that is top: -40px; font-size: 11px;) so that it does not mess with user input. I believe that is good enough for IE/old browsers.
Then we add the nice animation effect for browsers that do support :placeholder-shown by including following styles:
input:not(:focus):placeholder-shown + label {
top: -20px;
font-size: 16px;
}
:not(:focus) is necessary to resize and reposition label as soon as user focuses an input because some browsers show placeholder even after focus (and hide it only after user starts typing).
body {
background: #fff;
color: 404040
}
form {
display: block;
position: relative;
width: 80%;
background: #f9f9f9;
margin: 10px auto;
padding: 30px;
}
label {
display: block;
position: relative;
/* top: -20px; */
top: -40px;
left: 0px;
color: #999;
font-family: 'Helvetica', sans-serif;
/* font-size: 16px; */
font-size: 11px;
z-index: 1;
transition: all 0.3s ease-out;
}
input/*,
input:optional */ {
display: block;
position: relative;
background: none;
border: none;
border-bottom: 1px solid #ddd;
width: 100%;
font-family: 'Helvetica', sans-serif;
font-weight: bold;
font-size: 16px;
z-index: 2;
}
input:focus/*,
input:valid*/ {
outline: none;
border-bottom: 1px solid #00aced;
}
input:focus+label/*,
input:required:valid+label*/ {
color: #00aced;
}
/* New styles >> */
input:not(:focus):placeholder-shown + label {
top: -20px;
font-size: 16px;
}
/* << */
.divider {
position: relative;
height: 30px;
width: auto;
background: none;
}
#hex1 {
width: 75px;
margin: 10px auto;
}
.headline {
margin-left: 100px;
font-size: 24px;
}
.submitBtn {
width: 250px;
height: 75px;
border-radius: 3px;
background: #37afac;
margin: 0 auto;
color: #fff
}
#title {
margin-top: -60px;
margin-left: 80px;
margin-bottom: 20px;
}
<form>
<h3>Details about the person you are reporting:</h3>
<div class='divider'></div>
<input placeholder=" " type="text" name="firstname" required autocomplete="off" />
<label for="firstname">First Name</label>
<div class='divider'></div>
<input placeholder=" " type="text" name="lastname" required autocomplete="off" />
<label for="lastname">Last Name</label>
<div class='divider'></div>
<input placeholder=" " type="text" name="age" class="test" autocomplete="off" />
<label for="age">Age</label>
<div class='divider'></div>
<input placeholder=" " type="text" name="gender" required autocomplete="off" />
<label for="gender">Gender</label>
<div class='divider'></div>
<input placeholder=" " type="text" name="address 1" autocomplete="off" />
<label for="address1">Address 1</label>
<div class='divider'></div>
<input placeholder=" " type="text" name="address 2" autocomplete="off" />
<label for="address2">Address 2</label>
<div class='divider'></div>
<input placeholder=" " type="text" name="city" required autocomplete="off" />
<label for="city">City</label>
<div class='divider'></div>
<input placeholder=" " type="text" name="state" required autocomplete="off" />
<label for="state">State</label>
<div class='divider'></div>
<input placeholder=" " type="text" name="position" autocomplete="off" />
<label for="Position">Position (coach, referee, etc)</label>
<div class='divider'></div>
<input placeholder=" " type="text" name="program" required autocomplete="off" />
<label for="Program">Program where individual works</label>
<div class='divider'></div>
<input placeholder=" " type="text" name="IncidentDescription" required autocomplete="off" />
<label for="IncidentDescription">Incident description</label>
<div class='divider'></div>
<input placeholder=" " type="text" name="IncidentLocation" required autocomplete="off" />
<label for="IncidentLocation">Incident location</label>
<div class='divider'></div>
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.
CSS only, I prefer not to add any additional JS. The 2nd radio button is not being "checked" when clicked.
Here's fiddle already created.
HTML:
<div class="account-container">
<div class="form-group">
<div class="control-container clearfix">
<div class="col-md-4 radio">
<input type="radio" name="Gender" value="Mujer" checked />
<label>Mujer</label>
</div>
<div class="col-md-4 radio">
<input type="radio" name="Gender" value="Hombre" />
<label>Hombre</label>
</div>
</div>
</div>
</div>
CSS:
.account-container .radio {
height: 100%;
margin: 0;
}
.account-container .radio label {
position: relative;
line-height: 40px;
cursor: pointer;
padding-left: 30px;
}
.account-container .radio label:before {
content: " ";
display: inline-block;
width: 22px;
height: 22px;
position: absolute;
left: 0;
top: 9px;
border: 1px solid #1fb5e1;
background-color: #fff;
border-radius: 50%;
}
.account-container .radio input[type="radio"]:checked + label:after {
background-color: #1fb5e1;
width: 14px;
height: 14px;
border-radius: 50%;
position: absolute;
content: " ";
left: 5px;
top: 14px;
}
<input type="radio" id="id_of_radio">
<label for="id_of_radio">
The issue is the position of your radio items, since they are not visible, you cannot click on it.
You should use the capability of the label, when you click on it, the bounded element is selected.
http://jsfiddle.net/fvzegu6o/1/
<div class="col-md-4 radio">
<input type="radio" name="Gender" value="Mujer" id="mujer" checked />
<label for="mujer">Mujer</label>
</div>
<div class="col-md-4 radio">
<input type="radio" name="Gender" value="Hombre" id="hombre" />
<label for="hombre">Hombre </label>
</div>
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;
index.html with a form:
<form id="mc-embedded-subscribe-form" class="validate" name="mc-embedded-subscribe-form" method="post" action="mailing.php"><pre>
<fieldset>
<div class="mc-field-group">
<div class="input-cont">
<input id="email" class="required email input-text example" type="text" name="email" value="Your email address" onfocus="value=''" style="color: rgb(178, 178, 178);">
</div>
</div>
<div class="submit-cont">
<input id="submit" class="input-submit" type="submit" name="subscribe" value="">
CSS right now:
#content form #submit {
background: url("../img/join-button.png") no-repeat left top;
border: 0 none;
color: #221505;
cursor: pointer;
float: right;
font-size: 23px;
font-weight: 800;
height: 46px;
outline: 0 none;
position: relative;
top: 1px;
width: 102px;
How in this case to specify a:hover and a:active properties and change a background images as I do not have any values in my html or is there a better way to do this? Thanks.
This should work
#content form #submit:hover {
background-image: ...
}
#content form #submit:active {
background-image: ...
}