I need to create a tick in a checkbox using CSS and not an image.
I can see the green '✔' showing up correctly. but the top and left in css is just not working the tick sign is always stuck at the upper left corner at the checkbox and I want it at the middle. Why is the content and color property working but left and top not working?
Top and left doesn't work with static element, you need to specify a relative, fixed or absolute position in order to use these property. You can try this :
input[type=checkbox]:checked ~ .icon:after, ._checked input[type=checkbox] ~ .icon :after {
background-position: 0 -800px;
content: '✔';
font-size: 25px;
margin: auto;
top: 15px;
left: 250px;
color: green;
position: relative;
}
A full code :
input[type=checkbox]:focus+.icon {
background-position: 0 -822px;
}
input[type=checkbox]:checked~.icon,
._checked input[type=checkbox]~.icon {
background-position: 0 -856px;
background-color: #2196F3;
display: block;
}
input[type=checkbox]:checked~.icon:after,
._checked input[type=checkbox]~.icon :after {
background-position: 0 -800px;
content: '✔';
font-size: 25px;
margin: auto;
top: 5px;
left: 50%;
margin-left:-12px;
color: green;
position:relative;
}
input[type=checkbox]:not(:checked)+div.validationsContainer~.icon {
background-position: 0 -890px;
}
,
input[type=checkbox]:checked:hover+label,
input[type=checkbox]:checked:focus+label {
background-position: 0 15.3%;
}
&.hasError .icon {
background-position: 0 -890px;
}
<input type="checkbox" required="required" name="terms" id="termsAgree" auto-required="true">
<span class="icon"></span>
Related
UPDATE
Here is a jsFiddle with the image and hover event.
I have a sprite image containing 4 "button" images each 30px x 60px - so the total image size is 60px x 120px. Each button is displayed using its proper background offset in the css as shown below.
I want to increase the clickable area of each button, but if I increase padding for the image, more of the image will show than contained in the defined width and height. Can I increase padding or use some other method where the image is still constrained to the amount in height and width?
I do have a containing a tag. I am able to increase the clicking area of the buttons by padding the a tag, but I still need to give feedback via the img hover that the mouse is in the clickable area.
img.prev{
background:url(../img/buttons.gif) no-repeat 0px 0px scroll;
width: 30px;
height: 60px;
}
img.prev:hover{
background-position: 0px -60px;
}
img.next{
background:url(../img/buttons.gif) no-repeat -30px 0px scroll;
width: 30px;
height: 60px;
}
img.next:hover{
background-position: -30px -60px;
}
OK - I think I've got an answer. It seems I can increase the padding of the containing a tag to increase the clicking area and then use the hover event of the a tag to set the background for the img. The following css is for the containing a tags.
Please let me know if there is a better or another solution.
#a-next{
padding-left: 30px;
padding-bottom: 200px;
}
#a-prev{
padding-right: 30px;
padding-bottom: 200px;
}
#a-next:hover > img{
background-position: -30px -60px;
}
#a-prev:hover > img{
background-position: 0px -60px;
}
the pseudo will do . https://jsfiddle.net/mgggf5vo/6/
catch hover from the link, so it includes the pseudo area.
Te correct attribute for links is title, not alt.
a {
display: inline-block;
position: relative;
vertical-align: middle;
cursor:pointer;/* href is missing */
}
a:before {/* give it any size */
content: '';
position: absolute;
height: 60px;
width: 50px;
margin-left: 29px;
}
a[title="next"]:before {
right: 29px;
}
img.prev {
background: url(http://www.waldorfteacherresources.com/img/slideshow-buttons-large.gif) no-repeat 0px 0px scroll;
width: 30px;
height: 60px;
padding: 0;
}
a:hover img.prev {
background-position: 0px -60px;
}
img.next {
background: url(http://www.waldorfteacherresources.com/img/slideshow-buttons-large.gif) no-repeat -30px 0px scroll;
width: 30px;
height: 60px;
padding: 0;
}
a:hover img.next {
background-position: -30px -60px;
}
<div>
<a title="prev">
<img src="http://www.waldorfteacherresources.com/img/blank.gif" alt="prev" class="prev">
</a>
Something Here
<a title="next">
<img src="http://www.waldorfteacherresources.com/img/blank.gif" alt="next" class="next">
</a>
</div>
Learning to use sprite menu right now by following a tutorial. But for some reason, Chrome is giving me a 'invalid property value' on some of the background-position lines. The first one, with position 0 0 works fine, but the other two with -33 0 and 0 -33 won't work, which means my site is only showing 1 button right now and the hover isn't applied. The picture I am using right now is 197x65
#sidebar .content .follow a {
display: block; float: left; height: 32px;
background-image: url('http://s23.postimg.org/8ltupgj0r/follow.png'); text-indent: -9999px;
margin-right: 5px;
}
#sidebar .content .follow a.fb {
width: 32px; background-position: 0 0; }
#sidebar .content .follow a.twit {
width: 32px; background-position: -33 0; }
#sidebar .content .follow a.fb:hover {
background-position: 0 -33; }
On the background-position properties you need to set what value type you are wanting, px, em, etc. CSS understands the 0 but you need to be more specific for the other values.
#sidebar .content .follow a.twit {
width: 32px; background-position: -33px 0; }
#sidebar .content .follow a.fb:hover {
background-position: 0 -33px; }
I have the following element:
<div class="menubar">
<a class="homebutton" href="mydomain.com/home"></a>
</div>
Using this style:
.menubar {
text-align:center;
background-image:url(/img/menubar_background.png);
}
.homebutton
{
display: block;
width: 139px;
height: 23px;
background: url("/img/home_button_rollover.png") no-repeat 0 0;
}
.homebutton:hover
{
background-position: 0 -23px;
}
What I am trying to achieve is to have the menubar center it's content and the buttons is a CSS-rollover. The problem is that the button, using this exact code stays aligned to the left instead of being center.
Solved (j08691):
.homebutton
{
display: inline-block;
margin:0 auto;
width: 139px;
height: 23px;
background: url("/img/home_button_rollover.png") no-repeat 0 0;
}
Works: http://jsfiddle.net/j08691/WdQfk/1/
Add margin:0 auto; to .homebutton.
To center a block element it has to have a width (you have that) and you need to set the left and right margin to auto e.g. 0 auto;
jsFiddle example
I have a link, with which i want use plus, which will change color on hover.
But in the past hour i cant figure out how to do this trick with spites.
Here is a link, nothing special
Find Out More!
My css code
.block a.plus {
background: url("images/plus.png") no-repeat 0% 40%;
background-position: 10px , 0px;
font-size: 12px;
padding-left: 25px;
}
.block a.plus:hover{
/*Just for example*/
background-position: -15px -1px;
}
And also plus img
CSS sprites are often vertical arranged, since this will enable you to display only a specific line in your sprite file. In order to use the sprite technique on horizontal arranged images you have to create a second element with a non-transparent background:
<a href="detailed.html" class="plus">
<span>Find Out More!</span>
</a>
.block a.plus {
background: url("images/plus.png") no-repeat 0% 40%;
background-position: 10px , 0px;
font-size: 12px;
display: inline-block;
padding-left: 16px; /* actual width of one icon */
}
.block a.plus:hover{
/*Just for example*/
background-position: 0 -16px;
}
.block a.plus span{
background-color: #fff;
}
If you don't want to use a second element you should rearrange your icons.
You can achieve this with the :before selector.
Find Out More!
a.plus {
position: relative;
padding-left: 25px;
}
a.plus:before {
position: absolute;
left: 0;
content: " ";
width: 15px;
height: 15px;
background: red url("images/plus.png") 10px 0 no-repeat;
}
The color red is just for testing, you can leave that one out. -10px 0 is the location of the image in the sprite (x y).
My CSS Sprite here
The problem is that the image changes position even when the empty area to the right of links is hovered over with mouse..what I want is the image position to change ONLY when mouse is over those texts ie "Link1", "Link2", etc.
What do I need to change in my code ?
You need to shrinkwrap the elements.
http://jsfiddle.net/xkRcN/8/
Bad HTML! Bad bad HTML! Shrinkwrapping is of course the correct solution, but surely it'll be good to use valid HTML at the same time?
Using the general sibling selector, this code will work without causing dozens of validation errors at the same time.
HTML:
<div class="container">
Link 1
Link 2
Link 3
Link 4
Link 5
Link 6
<div class="sp_ID0"></div>
</div>
CSS:
.sprite {
display: block;
margin-bottom: 5px;
float: left; /* These two lines are where the shrinkwrapping occurs */
clear: both;
color: white;
}
.container, .sp_ID0 {
width: 600px;
height: 203px;
}
.sp_ID0 {
background-image: url(http://farm5.static.flickr.com/4106/5064283850_fc6b5fac15_b.jpg);
background-repeat: no-repeat;
}
.container {
position:relative;
}
.sp_ID0 {
z-index: -2;
position: absolute;
top: 0px;
left: 0px;
display: block;
}
.sp_ID1:hover ~ .sp_ID0 { background-position: 0px -203px; }
.sp_ID2:hover ~ .sp_ID0 { background-position: 0px -406px; }
.sp_ID3:hover ~ .sp_ID0 { background-position: 0px -609px; }
.sp_ID4:hover ~ .sp_ID0 { background-position: 0px -812px; }
.sp_ID5:hover ~ .sp_ID0 { background-position: 0px -203px; }
.sp_ID6:hover ~ .sp_ID0 { background-position: 0px -406px; }