Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

format checkbox input

Posted on 2014-08-13
7
Medium Priority
?
227 Views
Last Modified: 2014-08-13
I have a list of checkboxes that works fine. The label text can be handeled by a style

I just cant set a background or any properties of the checkbox

<form method="post" name="forma" action="modex.php" >


<div style="height: 6em; width: 12em; overflow: auto;">
	
		

<input  type="checkbox" id="armadora" name="armadora[]" value="AUDI"  onclick="changeFunc('AUDI');">
<label style="background-color: #EAF5FE; font-family:Arial;" for="AUDI">AUDI</label>
<br>

<input  type="checkbox" id="armadora" name="armadora[]" value="BENTLEY"  onclick="changeFunc('BENTLEY');">
<label style="background-color: #EAF5FE; font-family:Arial;" for="BENTLEY">BENTLEY</label>
<br>

<input  type="checkbox" id="armadora" name="armadora[]" value="BMW"  onclick="changeFunc('BMW');">
<label style="background-color: #EAF5FE; font-family:Arial;" for="BMW">BMW</label>
<br>
 
</div>
<input type="submit">
</form>

Open in new window

0
Comment
Question by:robrodp
  • 3
  • 2
  • 2
7 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 40258755
Not really possible, the checkbox is one of those elements that cannot be styled - you have to replace it with a different element and bind the two together

If you are using jQuery there's a rake of plugins you can use
http://www.sitepoint.com/15-jquery-radio-button-checkbox-style-plugins/
0
 

Author Comment

by:robrodp
ID: 40258770
Mh... well I changed to checkboxes because jquery is not working with ie 11 And as yoy commented, I thought I could format it anyway I needed. I guess I got theat wrong
0
 
LVL 58

Accepted Solution

by:
Gary earned 2000 total points
ID: 40258783
jquery is not working with ie 11
Uh?
Would be easier to just use a list tag.
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 

Author Closing Comment

by:robrodp
ID: 40258810
Definitely a list tag is the way to go

Thx
}
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 40258827
if you are not concerned with IE 8 or below, you can use the :checked pseudo class to "style" the check boxes. Essentially, you will be hiding the checkbox and replacing it with an image. By styling the label element all the functionality of the checkbox will remain intact.

In this example, I am using modernizr to test for support of the :checked pseudo class. This is optional. But remember to remove the ".csschecked" qualifier if you remove the modernizr code. And of course, provide your own check graphic.

You do not need jquery for this one, but like Gary pointed out, why your jquery isn't working in IE 11 is questionable.

<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
        <title></title>

        <meta name="viewport" content="width=device-width, initial-scale=1" /> 
        <meta name="apple-mobile-web-app-capable" content="yes" /> 
        <meta name="apple-mobile-web-app-status-bar-style" content="black" /> 
        <link rel="apple-touch-startup-image" href="/startup.png">

        <meta name="description" content="Graphic design and web development">
        <meta name="author" content="C &amp; P Generation, LLC">
		<style>
			*{
				-webkit-box-sizing:border-box;
				-moz-box-sizing:border-box;
				box-sizing:border-box;
				margin:0;
				padding:0;
			}
			.csschecked .single-checkbox{
			    position:relative;
			    min-height:22px;
			}

			.csschecked .single-checkbox input{
			    position:absolute;
			    opacity:0;
			    filter: alpha(opacity = 0);
			}
			.csschecked .single-checkbox label{
			    position:absolute;
			    cursor:pointer;
			    padding-left:20px;
			    padding-top: 2px;
			    background:url(http://candpgeneration.com/toys/images/checkbox.png) 0 0 no-repeat;
			}
			.csschecked .single-checkbox :checked + label{
			    background-position:0 -30px;
			}

		</style>
		<script src="http://modernizr.com/downloads/modernizr-latest.js"></script>
		<script>
		Modernizr.addTest('csschecked', function () {
				  return Modernizr.testStyles("#modernizr input {margin-left:0px;} #modernizr input:checked {margin-left: 20px;}", function (elem) {
				    var chx = document.createElement('input');
				    chx.type = "checkbox";
				    chx.checked = "checked";
				    elem.appendChild(chx);
				    return elem.lastChild.offsetLeft >= 20;
				  });
				});
		</script>
	</head>
	<body>
		<div class="wrapper">
			<div class="single-checkbox">
			    <input type="checkbox" id="chk1"> 
			    <label for="chk1">Check it!</label>
			</div>
		</div>
		<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
		<script>
			
		</script>
	</body>
</html>

Open in new window

0
 

Author Comment

by:robrodp
ID: 40258843
jquery gives me starnge resulras it is too browser dependent.

Id rather use checkboxes ia a more traditional way so I have no problems with my users.

And in México I am definitely concerned with ie 8 and lower
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 40258868
jquery is not browser dependent. if you are running into issues in ie 11 it's or some other reason.

If you want to use traditional checkboxes in IE less than 8 then you will not be able to style them, and to try to hack something together for some ancient and inferior browser would not be wise. Let the check boxes fall back to their default look and feel in those browsers.
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
Suggested Courses

810 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question