I'm trying to change color of first two stars in fontawesome star rating at http://fortawesome.github.io/Font-Awesome/examples/
I have assigned a class to first & second span but it is not working
My html is
<span class="rating">
<span class="star filled"></span>
<span class="star filled"></span>
<span class="star"></span>
<span class="star"></span>
<span class="star"></span>
</span>
and my css is
.rating {
unicode-bidi:bidi-override;
direction:rtl;
font-size:30px;
}
.rating span.star {
font-family:FontAwesome;
font-weight:normal;
font-style:normal;
display:inline-block;
}
.rating span.star:hover {
cursor:pointer;
}
.rating span.star:before {
content:"\f006";
padding-right:5px;
color:#999999;
}
.rating span.star:hover:before, .rating span.star:hover~span.star:before {
content:"\f005";
color:#e3cf7a;
}
.filled{ color:#e3cf7a; }
JSFIDDLE http://jsfiddle.net/code_snips/ttyYD/
.filled is not specific enough, use span.star.filled
Moreover, the icons are actually styled through :before, so use span.star.filled:before{ color:#e3cf7a; }
If you want the star to be filled, add content:"\f005";, too.
But this is probably still not what you want; you might not have noticed, but the .rating class changes the text direction (unicode-bidi:bidi-override; direction:rtl;).
So, you'd need to apply the filled class to the last two span tags.
Try this one
Jsfiddle
Script:
$('.rating span.star').click(function(){
var total=$(this).parent().children().length;
var clickedIndex=$(this).index();
$('.rating span.star').removeClass('filled');
for(var i=clickedIndex;i<total;i++){
$('.rating span.star').eq(i).addClass('filled');
}
});
.rating{unicode-bidi:bidi-override;direction:rtl;font-size:10px;}
.rating span.star{font-family:FontAwesome;font-weight:normal;font-style:normal;display:inline-block}
.rating span.star:hover{cursor:pointer}
.rating span.star:before{content:"\f006";padding-right:5px;color:#999}
.rating span.star:hover:before,.rating span.star:hover~span.star:before{content:"\f005";color:#e3cf7a}
.rating span.star.filled {}
.rating span.star.filled:before{content:"\f005";color:#e3cf7a; }
<span class="rating" style="font-size:13px;"><span class="star"></span><span class="star"></span><span class="star filled"></span><spanclass="star filled"></span><span class="star filled"></span></span>
Related
How to put the checkbox and label in one line?
<style>
#supports (zoom:2) {
input[type=checkbox]{
zoom: 2;
}
}
#supports not (zoom:2) {
input[type=checkbox]{
transform: scale(2);
margin: 15px;
}
}
label{
/* fix vertical align issues */
display: inline-block;
vertical-align: top;
margin-top: 10px;
color:black;
}
</style>
<input type="checkbox" name="check_gdpr" id="check_gdpr" checked />
<label for="cc">Inform me by e-mail</label>
Wrap the input in the label:
<label><input type="checkbox" name="check_gdpr" id="check_gdpr" checked>Inform me by e-mail</label>
just put your checkbox and label in span
example<span class="get-inline"><lable>Inform me by e-mail</lable></span>
<span class="get-inline"><input type="checkbox" name="check_gdpr" id="check_gdpr" checked /> </span>
now add css like this:
.get-inline{display:inline-block;}
i hope it will work
Update
vertical-align: top
to
vertical-align: middle
in your CSS for label and it should work just fine.
I'd like to create a program where in:
* When you click Span 1, Span 2 will be displayed and Span 1 will be disabled.
* When you click Span 2, Span 1 will be displayed and Span 2 will be disabled.
This is my codes and I think it's strange. Your help is greatly appreciated.
CSS
body {
display: block;
}
.span1:focus ~ .span2 {
display: none;
}
.span2:focus ~ .span1 {
display: block;
}
HTML
<span class="span1" tabindex="0">Span 1</span>
<span class="span2" tabindex="0">Span 2</span>
Use this css below:
body {
display: block;
}
.span1:focus{
color:gray;
}
.span2{
color:gray;
}
.span1:focus ~ .span2 {
display: inline-block;
color:black;
}
.span2:focus{
color:gray;
}
.span2:focus ~ .span1 {
color:black
}
Check the jsfiddle demo
This problem can not be solved by Pure CSS and HTML , the answer can be found by javascript.
<span class="span1" tabindex="0" onclick="span1Clciked()">Span 1</span>
<span class="span2" tabindex="0" onclick="span2Clicked()">Span 2</span>
and on javascript
<script>
function span1Clicked(){
var x = document.getElementsByClassName("span2").item(0);
x.style.visibility='hidden';
// other stuff
}
function span2Clicked(){
var x = document.getElementsByClassName("span1").item(0);
x.style.visibility='hidden';
// other stuff
}
</script>
Could be accomplished easily and with more flexibility in JavaScript. Example in jQuery:
$('span').click(function() {
$(this).css('visibility','hidden').siblings().css('visibility','visible');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<span class="span1" tabindex="0">Span 1</span>
<span class="span2" tabindex="0">Span 2</span>
I have the following HTML:
<div class="statistics">
<span class="glyphicon glyphicon-calendar"></span>19/06/2015
<span class="glyphicon glyphicon-eye-open"></span> 18 lectures
<span class="glyphicon glyphicon-comment"></span> 1 commentaire
<span class="glyphicon glyphicon-user"></span> Sébastien Sougnez
<span class="glyphicon glyphicon-heart note"></span>
<span class="glyphicon glyphicon-heart note"></span>
<span class="glyphicon glyphicon-heart note"></span>
<span class="glyphicon glyphicon-heart note"></span>
<span class="glyphicon glyphicon-heart-empty note"></span>
</div>
I'm applying some CSS style and amongst them, I have this :
.article .statistics span.note {
margin-left:0px;
margin-right:5px;
}
.article .statistics span.note:first-child {
margin-left:25px;
}
The first CSS block is correctly applied, the space between all "note" span is about 5px but I'd like to put a margin-left on the first span with the "note" class of 25px, however, the first-child does not seem to select the element which is weird because I also have this CSS :
.article .statistics span {
margin-left:25px;
margin-right:5px;
}
.article .statistics span:first-child {
margin-left:0px;
}
And here, it works fine, all span are separated by 25px (on the left) except the first one. I guess it has something to do with the class but I looked over the Internet and this seems to be the correct syntax.
Thanks
The first span.note is not the first child of .statistics, so span.note:first-child will not match. The first child is a span that doesn't have the .note class, so only the span:first-child selector without the class will match, on that child element.
Using the technique described here, apply the left margin to all span.note children and then remove it from subsequent ones, instead of trying to apply it separately to the first one:
.article .statistics span.note {
margin-left:25px;
margin-right:5px;
}
.article .statistics span.note ~ span.note {
margin-left:0px;
}
you can straight match the first span.note element, like so
/* when it is exactly the first child of its parent
* (not your specific case)
*/
span.note:first-child,
/* when it is not the first-child, and then is
* preceded by another span whose class is not ".note"
*/
span:not(.note) + span.note {
margin-left: 25px;
}
Codepen Example: http://codepen.io/anon/pen/WvdqbR
You don't seem to understand :first-child. All this selector asks is "Am I the first child of my parent?" - nothing more. None of you span.note fulfills this.
Try important to this property
.article .statistics span:first-child {
margin-left:0px !important;
}
I have custom checkboxes I styled like buttons. When you click the label or input the div around it changes color. However, only the label and input are clickable.
Is there a way to make the entire div/button clickable (i.e. everything inside the border)?
Here's my code:
div.label {
border:solid 1px gray;
line-height:40px;
height:40px;
width: 250px;
border-radius:40px;
-webkit-font-smoothing: antialiased;
margin-top:10px;
font-family:Arial,Helvetica,sans-serif;
color:gray;
text-align:center;
}
label {
display:inline;
text-align:center;
}
input[type=checkbox] {
display: none;
}
input:checked + div {
border: solid 1px red;
color: #F00;
}
input:checked + div:before {
content: "\2713";
}
<input id="lists[Travel]" type="checkbox" name="lists[Travel]" />
<div class="label">
<label for="lists[Travel]">Travel</label> <br>
</div>
The answer is quite symple: you don't need an additional div-element. Actually you can place a label-element wherever you want and associate it with an input-element of your choice.
You do so by giving the input-element an id-attribute and associate the label-element with a corresponding for-attribute.
eg: <input id="my-input-id">[...]<label for="my-input-id">Label Text</label>)
A <label> can be associated with a control either by placing the control element inside the element, or by using the for attribute. Such a control is called the labeled control of the label element. One input can be associated with multiple labels.
Labels are not themselves directly associated with forms. They are only indirectly associated with forms through the controls with which they're associated.
When a <label> is clicked or tapped, and it is associated with a form control, the resulting click event is also raised for the associated control.
Source: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label
label {
display:block;
border:solid 1px gray;
line-height:40px;
height:40px;
width: 250px;
border-radius:40px;
-webkit-font-smoothing: antialiased;
margin-top:10px;
font-family:Arial,Helvetica,sans-serif;
color:gray;
text-align:center;
}
input[type=checkbox] {
display: none;
}
input:checked + label {
border: solid 1px red;
color: #F00;
}
input:checked + label:before {
content: "\2713 ";
}
/* new stuff */
.check {
visibility: hidden;
}
input:checked + label .check {
visibility: visible;
}
input.checkbox:checked + label:before {
content: "";
}
<input id="lists[Travel]" type="checkbox" name="lists[Travel]" />
<label for="lists[Travel]">Travel with jump</label>
<!-- alternatively avoid jumps between text of state checked and unchecked -->
<input class="checkbox" id="lists[new]" type="checkbox" name="lists[new]" />
<label for="lists[new]"><span class="check">✓</span> Travel without jump</label>
In addition you can fiddle around with the display: block of the <label>.
But this should be quite simple by giving it float: left, display: inline-block or whatever to get the desired elements float.
CODEPEN
Here's a one way to achieve this:
<div onclick="this.querySelector('input[type=checkbox]').click()">
<input type="checkbox" style="pointer-events:none">
<span>Label</span>
</div>
Or if you give the checkbox an id:
<div onclick="abc.click()">
<input id="abc" type="checkbox" style="pointer-events:none">
<span>Label</span>
</div>
You need pointer-events:none in this appraoch because otherwise a double-click (causing check and uncheck) happens when you click on the checkbox directly.
I want to style the checkboxes. I am able to do that using following HTML markup and CSS.
However the problem is that i have a bit different HTML markup, which I cannot change.
The reason for not being able to change is that it is generated by a plugin, so i will need to edit the core files to change that, which I do not want to do.
So how can I add same style to the HTML which I have below.
Working HTML:
<input type="radio" id="radio">
<label for="radio"></label>
Required HTML:
<li>
<input id="option-11" type="radio" value="11">
<label for="option-11">Option one</label>
</li>
As you can see that although the markup is similar, but in the above the label is used to display the text.
CSS:
input[type="radio"], input[type="checkbox"] {
display: none;
}
input[type="radio"] + label{
background:url('http://refundfx.com.au/uploads/image/checkbox_empty.png');
padding:0;
display: inline-block;
width:20px;
height:20px;
}
input[type="radio"]:checked + label {
background:url('http://refundfx.com.au/uploads/image/checkbox_full.png');
}
Demo:
http://jsfiddle.net/JPSLm/
It works with your code, I don't know where the problem is.
http://jsfiddle.net/sGqsL/
HTML
<li>
<input type="radio" id="radio" name="radiogroup"/>
<label for="radio"></label>
</li>
and CSS
input[type="radio"], input[type="checkbox"] {
display: none;
}
input[type="radio"] + label{
background:url('http://refundfx.com.au/uploads/image/checkbox_empty.png');
padding:0;
display: inline-block;
width:20px;
height:20px;
}
input[type="radio"]:checked + label {
background:url('http://refundfx.com.au/uploads/image/checkbox_full.png');
}
li {
list-style-type: none;
}