I'm trying to render some html checkboxes using css.
I want it to look something like this (with all of the check boxes on one horizontal line and labeled):
<html>
<body>
<center>
<form id="pluginsForm">
<input type="checkbox" value="Button_1" name="plugin">Button_1
<input checked type="checkbox" value="Button_2" name="plugin">Button_2
<input type="checkbox" value="Button_3" name="plugin">Button_3
<input checked type="checkbox" value="Button_4" name="plugin">Button_4
<br>
<br>
<input type="BUTTON" value="Go" onclick="alert('GO')">
</form>
</center>
</body>
</html>
But using some fancy css stuff, and I can't seem to get it to work. The text doesn't appear correctly, its in mutliple lines, and the right button isn't shown as clicked when one is selected. (Based on an example from here)
<html>
<body>
<head>
<style>
body {
background: #555;
}
h1 {
color: #eee;
font: 30px Arial, sans-serif;
-webkit-font-smoothing: antialiased;
text-shadow: 0px 1px black;
text-align: center;
margin-bottom: 50px;
}
input[type=checkbox] {
visibility: hidden;
}
/* SQUARED ONE */
.squaredOne {
width: 28px;
height: 28px;
background: #fcfff4;
background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );
margin: 20px auto;
-webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
-moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
position: relative;
}
.squaredOne label {
cursor: pointer;
position: absolute;
width: 20px;
height: 20px;
left: 4px;
top: 4px;
-webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
-moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
background: -webkit-linear-gradient(top, #222 0%, #45484d 100%);
background: -moz-linear-gradient(top, #222 0%, #45484d 100%);
background: -o-linear-gradient(top, #222 0%, #45484d 100%);
background: -ms-linear-gradient(top, #222 0%, #45484d 100%);
background: linear-gradient(top, #222 0%, #45484d 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222', endColorstr='#45484d',GradientType=0 );
}
.squaredOne label:after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
content: '';
position: absolute;
width: 16px;
height: 16px;
background: #00bf00;
background: -webkit-linear-gradient(top, #00bf00 0%, #009400 100%);
background: -moz-linear-gradient(top, #00bf00 0%, #009400 100%);
background: -o-linear-gradient(top, #00bf00 0%, #009400 100%);
background: -ms-linear-gradient(top, #00bf00 0%, #009400 100%);
background: linear-gradient(top, #00bf00 0%, #009400 100%);
top: 2px;
left: 2px;
-webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
-moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
}
.squaredOne label:hover::after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
filter: alpha(opacity=30);
opacity: 0.3;
}
.squaredOne input[type=checkbox]:checked + label:after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}
</style>
</head>
<center>
<form id="pluginsForm" >
<div class="squaredOne">
<input type="checkbox" value="Button_1" id="squaredOne" name="check" />
<label for="squaredOne">Button_1</label>
</div>
<div class="squaredOne">
<input checked type="checkbox" value="Button_2" id="squaredOne" name="check" />
<label for="squaredOne">Button_2</label>
</div>
<div class="squaredOne">
<input type="checkbox" value="Button_3" id="squaredOne" name="check" />
<label for="squaredOne">Button_3</label>
</div>
<div class="squaredOne">
<input checked type="checkbox" value="Button_4" id="squaredOne" name="check" />
<label for="squaredOne">Button_4</label>
</div>
<br>
<br>
<input type="BUTTON" value="Go" onclick="alert('GO')">
</form>
</center>
</body>
</html>
HTML:
<center>
<form id="pluginsForm">
<div class="squaredOne">
<input type="checkbox" value="Button_1" id="squaredOne" name="check" />
<label for="squaredOne">Button_1</label>
</div>
<div class="squaredOne">
<input checked="checked" type="checkbox" value="Button_2" id="squaredTwo" name="check" />
<label for="squaredTwo">Button_2</label>
</div>
<div class="squaredOne">
<input type="checkbox" value="Button_3" id="squaredThree" name="check" />
<label for="squaredThree">Button_3</label>
</div>
<div class="squaredOne">
<input checked="checked" type="checkbox" value="Button_4" id="squaredFour" name="check" />
<label for="squaredFour">Button_4</label>
</div>
<br/>
<br/>
<input type="BUTTON" value="Go" onclick="alert('GO')" />
</form>
</center>
CSS:
body {
background: #555;
}
h1 {
color: #eee;
font: 30px Arial, sans-serif;
-webkit-font-smoothing: antialiased;
text-shadow: 0px 1px black;
text-align: center;
margin-bottom: 50px;
}
input[type=checkbox] {
visibility: hidden;
}
/* SQUARED ONE */
.squaredOne {
width: 28px;
height: 28px;
display: inline-block;
background: #fcfff4;
background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fcfff4', endColorstr='#b3bead', GradientType=0);
margin: 20px auto;
margin-right:70px;
-webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
-moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
position: relative;
}
.squaredOne label {
cursor: pointer;
position: absolute;
width: 20px;
height: 20px;
left: 4px;
top: 4px;
padding-left:30px;
}
.squaredOne label:after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
content: '';
position: absolute;
width: 16px;
height: 16px;
background: #00bf00;
background: -webkit-linear-gradient(top, #00bf00 0%, #009400 100%);
background: -moz-linear-gradient(top, #00bf00 0%, #009400 100%);
background: -o-linear-gradient(top, #00bf00 0%, #009400 100%);
background: -ms-linear-gradient(top, #00bf00 0%, #009400 100%);
background: linear-gradient(top, #00bf00 0%, #009400 100%);
top: 0px;
left: 0px;
-webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
-moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
border:2px solid #333;
}
.squaredOne input[type=checkbox]:checked + label:after {
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}
JSFiddle
Related
I have to color 50% of the progress bar with red color. Here is what I have tried , my css and html:
.progress {
width:100%;
display: inline-block;
height: 0.4615384615384615em;
padding: 0.0769230769230769em;
background: #fff;
border: 1px solid #c0c0c0;
position: relative;
-webkit-border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
background: #f9f9f9;
background: -moz-linear-gradient(top, #ffffff 0, #f2f2f2 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f2f2f2));
background: -webkit-linear-gradient(top, #ffffff 0, #f2f2f2 100%);
background: -o-linear-gradient(top, #ffffff 0, #f2f2f2 100%);
background: -ms-linear-gradient(top, #ffffff 0, #f2f2f2 100%);
background: linear-gradient(to bottom, #ffffff 0, #f2f2f2 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#f2f2f2, GradientType=0);
filter: none \9;
}
.progress.complete {
height: 0.9em;
position: relative;
}
<div id="id1" class="progress complete">
<span title="" style="background: red; left: 0%; width: 50%; box-shadow: 0px 2px 1px rgba(0,0,0,0.2), inset 0px 2px 1px rgba(0,0,0,0.2);" rel="tooltip"></span>
</div>
How to color it without adding any text to <span> element in the output?
You have forgot to mention height & position to span tag
.progress {
width:100%;
display: inline-block;
height: 0.4615384615384615em;
padding: 0.0769230769230769em;
background: #fff;
border: 1px solid #c0c0c0;
position: relative;
-webkit-border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
background: #f9f9f9;
background: -moz-linear-gradient(top, #ffffff 0, #f2f2f2 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f2f2f2));
background: -webkit-linear-gradient(top, #ffffff 0, #f2f2f2 100%);
background: -o-linear-gradient(top, #ffffff 0, #f2f2f2 100%);
background: -ms-linear-gradient(top, #ffffff 0, #f2f2f2 100%);
background: linear-gradient(to bottom, #ffffff 0, #f2f2f2 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#f2f2f2, GradientType=0);
filter: none \9;
}
.progress.complete {
height: 0.9em;
position: relative;
}
<div id="id1" class="progress complete">
<span title="" style="background: red; left: 0%; width: 50%; box-shadow: 0px 2px 1px rgba(0,0,0,0.2), inset 0px 2px 1px rgba(0,0,0,0.2);height: 100%; position: absolute;top: 0;" rel="tooltip"></span>
</div>
If you want to do that without span tag then use pseudo selector ::after as below to style that,
.progress {
width:100%;
display: inline-block;
height: 0.4615384615384615em;
padding: 0.0769230769230769em;
background: #fff;
border: 1px solid #c0c0c0;
position: relative;
-webkit-border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
background: #f9f9f9;
background: -moz-linear-gradient(top, #ffffff 0, #f2f2f2 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f2f2f2));
background: -webkit-linear-gradient(top, #ffffff 0, #f2f2f2 100%);
background: -o-linear-gradient(top, #ffffff 0, #f2f2f2 100%);
background: -ms-linear-gradient(top, #ffffff 0, #f2f2f2 100%);
background: linear-gradient(to bottom, #ffffff 0, #f2f2f2 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#f2f2f2, GradientType=0);
filter: none \9;
overflow:hidden;
}
.progress:after{
content:'';
position:absolute;
background: red;
left: 0%;
top:0;
width: 50%;
height:10px;
box-shadow: 0px 2px 1px rgba(0,0,0,0.2), inset 0px 2px 1px rgba(0,0,0,0.2);
z-index:9;
-webkit-border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
}
<div id="id1" class="progress complete">
</div>
Span tag default display is inline so you need to change that to inline-block and height to it.
.progress {
width: 100%;
display: inline-block;
height: 0.4615384615384615em;
padding: 0.0769230769230769em;
background: #fff;
border: 1px solid #c0c0c0;
position: relative;
-webkit-border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
background: #f9f9f9;
background: -moz-linear-gradient(top, #ffffff 0, #f2f2f2 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f2f2f2));
background: -webkit-linear-gradient(top, #ffffff 0, #f2f2f2 100%);
background: -o-linear-gradient(top, #ffffff 0, #f2f2f2 100%);
background: -ms-linear-gradient(top, #ffffff 0, #f2f2f2 100%);
background: linear-gradient(to bottom, #ffffff 0, #f2f2f2 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#f2f2f2, GradientType=0);
filter: none \9;
overflow: hidden;
}
.progress.complete {
height: 0.9em;
position: relative;
}
span {
background: red;
left: 0%;
width: 50%;
height: 15px;
display: block;
-webkit-border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.2), inset 0px 2px 1px rgba(0, 0, 0, 0.2);
}
<div id="id1" class="progress complete">
<span title="progress bar" rel="tooltip"></span>
</div>
I have a complicated project with some Rex code...
I'm modifying my form element and everything works but the checkboxes overlay the header when you scroll down the page...
I can't load a picture but here is a link in case you want a looks see...
Here the css of the check box...
.roundedFive {
width: 28px;
height: 28px;
background: #fcfff4;
background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );
margin: 20px 5px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
-webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
-moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
position: relative;
}
.roundedFive label {
cursor: pointer;
position: absolute;
width: 20px;
height: 20px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
left: 4px;
top: 4px;
-webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
-moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
background: -webkit-linear-gradient(top, #222 0%, #45484d 100%);
background: -moz-linear-gradient(top, #222 0%, #45484d 100%);
background: -o-linear-gradient(top, #222 0%, #45484d 100%);
background: -ms-linear-gradient(top, #222 0%, #45484d 100%);
background: linear-gradient(top, #222 0%, #45484d 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222', endColorstr='#45484d',GradientType=0 );
}
.roundedFive label:after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
content: '';
position: absolute;
width: 16px;
height: 16px;
background: #00bf00;
background: -webkit-linear-gradient(top, #00bf00 0%, #009400 100%);
background: -moz-linear-gradient(top, #00bf00 0%, #009400 100%);
background: -o-linear-gradient(top, #00bf00 0%, #009400 100%);
background: -ms-linear-gradient(top, #00bf00 0%, #009400 100%);
background: linear-gradient(top, #00bf00 0%, #009400 100%);
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
top: 2px;
left: 2px;
-webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
-moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
}
.roundedFive label:hover::after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
filter: alpha(opacity=30);
opacity: 0.3;
}
.roundedFive input[type=checkbox]:checked + label:after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}
input[type=text] {
border: 5px solid white;
-webkit-box-shadow:
inset 0 0 8px rgba(0,0,0,0.1),
0 0 16px rgba(0,0,0,0.1);
-moz-box-shadow:
inset 0 0 8px rgba(0,0,0,0.1),
0 0 16px rgba(0,0,0,0.1);
box-shadow:
inset 0 0 8px rgba(0,0,0,0.1),
0 0 16px rgba(0,0,0,0.1);
padding: 5px;
background: rgba(255,255,255,0.5);
margin: 0 0 20px 0;
}
and here is the html (with REXX code)(old IBM code)
Say '<div id="cgibody1">'
Say '<table width="300">'
Say '<thead><tr><th colspan="3" scope="col"><h2>Individual Tests OR Run ALL tests</h2></th></tr></thead>'
Say '<tr><td WIDTH="50px" align="right">'
Say '<div class="roundedOne">'
Say '<input type="checkbox" name="memory" id="roundedOne" />'
Say '<label for="roundedOne"></label></td>'
Say '</div>'
Say '<td width="50px">Memory</td>'
Here's the source (without cgi REXX)
<div id="header">
<div id="logo"><img src="/pes/images/zlogo1.png" width="36" height="42"> </div>
<div id="enterprise">Palladium Z1 WFBSCD13 <span style="color:gold"><?php echo $host ?></span></div>
<div id="topmenu">
<ul class="nav">
<li class="nav-item">Main
<ul class="submenu">
<li>Health Status</li>
<li>Diags
</ul></li>
<li class="nav-item">Logs
<ul class="submenu">
<li>Display configmgr.alertlog</li>
<li>Display configmgr.log</li>
<li>Display ET3_activity.log</li>
<li>aplog.cgi?hostname=<?php echo $host ?>&type=bm&logname=apsm&date=<?php echo $datestamp[DTE 0] ?>" target="_blank">Display apsm.log</a></li>
<li>Display /var/log/messages</li>
</ul></li>
<li class="nav-item">Hardware
<ul class="submenu">
<li>Display Hardware Configuration</li>
<li>Summarize Offline Hardware Resources </li></ul>
</ul>
</div></div>
<body>
</div></div>
<div id="cgibody0">
<form name="diagnostics" method="get" action="rundiags.cgi">
<p>Select which tests to run, the domains to run on, then click "Run Tests".
<input type="hidden" name="hostname" value="WFBSCD13"></p>
<input type="hidden" name="caller" value="pdz"></p>
</div>
<div id="cgibody1">
<table width="300">
<thead><tr><th colspan="3" scope="col"><h2>Individual Tests OR Run ALL tests</h2></th></tr></thead>
<tr><td WIDTH="50px" align="right">
<div class="roundedOne">
<input type="checkbox" name="memory" id="roundedOne" />
<label for="roundedOne"></label></td>
</div>
I need some eyes that can see what I can not and would appreciate help on this matter as this is my last problem on this page... Thank you...
For this issue you have to add z-index:9999 style to your header. Z-index is used to show element on element like if you want to show one element(y) above other element(y) then use z-index with positive and negative values. Positive value element will over come and negative value element will go behind the element.
This box is for filtering the content on a page. I have downloaded this check box from a website and tried to add a text beside it but I can't. The text keep appearing at the same position of the checkbox.
<div class="roundedOne">
<input class="swiftfilter" type="checkbox" data-container=".isotope-filter" data-search-in=".grid_6" value="france" data-child=".titledayarchivetour p" data-child-only="true" id="roundedOne" name="check" />
<label for="roundedOne">CHOOSE FRANCE</label>
</div>
.roundedOne {
width: 28px;
height: 28px;
background: #fcfff4;
float: left;
background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );
margin: 20px auto;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
-webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
-moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
position: relative;
}
.roundedOne label {
cursor: pointer;
position: absolute;
width: 20px;
height: 20px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
left: 4px;
top: 4px;
-webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
-moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
background: -webkit-linear-gradient(top, #222 0%, #45484d 100%);
background: -moz-linear-gradient(top, #222 0%, #45484d 100%);
background: -o-linear-gradient(top, #222 0%, #45484d 100%);
background: -ms-linear-gradient(top, #222 0%, #45484d 100%);
background: linear-gradient(top, #222 0%, #45484d 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222', endColorstr='#45484d',GradientType=0 );
}
.roundedOne label:after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
content: '';
position: absolute;
width: 16px;
height: 16px;
background: #00bf00;
background: -webkit-linear-gradient(top, #00bf00 0%, #009400 100%);
background: -moz-linear-gradient(top, #00bf00 0%, #009400 100%);
background: -o-linear-gradient(top, #00bf00 0%, #009400 100%);
background: -ms-linear-gradient(top, #00bf00 0%, #009400 100%);
background: linear-gradient(top, #00bf00 0%, #009400 100%);
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
top: 2px;
left: 2px;
-webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
-moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
}
.roundedOne label:hover::after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
filter: alpha(opacity=30);
opacity: 0.3;
}
.roundedOne input[type=checkbox]:checked + label:after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}
You have to remove width from .roundedOne element and position:absolute; from label.
Jsfiddle
I am using some css styled checkboxes and want to have a parent container (I am using a div) to scroll when they overflow a certain height. I am currently using this:
/**
* Menu Styles
*/
.fieldset-auto-width {
display: inline-block;
}
.menu_header
{
vertical-align:middle;
background-color:#d0eace;
padding-top:24px;
padding-bottom:24px;
padding-left:24px;
padding-right:24px;
width:500px;
}
.menu_button
{
padding-top:12px;
padding-left:8px;
width:50px;
vertical-align:middle;
}
.menu_description
{
padding-top:12px;
padding-left:8px;
padding-right:8px;
width:400px;
}
.created_by
{
display:inline-block;
float:right;
}
input,.container
{
background-color:white;
}
select
{
color: #000;
font-size: 12px;
background: transparent;
/*-webkit-appearance: none;*/
}
button, option {
background-color: white;/*#d0eace;*/
}
input[type=radio] {
visibility: hidden;
}
/**
* frnakRadio Buttons!
*/
.frnakRadio {
width: 24px;
height: 24px;
background: #ddd;
margin: 10px 10px;
border-radius: 100%;
position: absolute;
-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
}
/**
* Create the checkbox button
*/
.frnakRadio label {
display: inline-block;
width: 18px;
height: 18px;
border-radius: 100px;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
-ms-transition: all .5s ease;
transition: all .5s ease;
cursor: pointer;
position: relative;
top: 3px;
left: 3px;
z-index: 1;
background: #333;
-webkit-box-shadow:inset 0px 1px 3px rgba(0,0,0,0.5);
-moz-box-shadow:inset 0px 1px 3px rgba(0,0,0,0.5);
box-shadow:inset 0px 1px 3px rgba(0,0,0,0.5);
}
/**
* Create the checked state
*/
.frnakRadio input[type=radio]:checked + label {
background: #26ca28;
}
.checkname
{
display: block;
margin: 10px 35px;
}
input[type=text] {
height:2.2em;
padding:5px 5px;
margin-bottom: 10px ;
border-radius:.75em;
-moz-border-radius:.5em;
-webkit-border-radius:.5em;
text-transform:none;
width:200px;
background:-webkit-gradient(linear, left top, left 25, from(#FFF), color-stop(1%,#FFF), to(#d0eace));
background:-moz-linear-gradient(right, #EEEDEE, #d0eace); /* For Firefox 3.6 to 15 */
color:#000;
font-size:.9em;
}
input[type=text]:focus{
box-shadow:1px 1px 10px #446;
outline:none;
}
.crunch:hover
{
background-color: #d0eace;
font-weight:bold;
}
.centercontainer {
/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;
/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;
/* Safari, Opera, and Chrome */
/*display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;*/
/* W3C */
display:box;
box-pack:center;
box-align:center;
display: inline-block;
}
.status
{
border-radius: 100%;
margin:0px 20px;
border: 1px solid black;
width: 15px;
height: 15px;
float:center;
}
.queued
{
background: yellow;
}
.running
{
background:green;
}
.failed
{
background:red;
}
.key
{
float: left;
width: 15px;
text-align: left;
margin: 2px 2px;
margin-left:25px;
display: inline-block;
}
.keytext
{
width: 80px;
float: left;
text-align: left;
margin: 2px 2px;
display: inline-block;
font-size:14px;
font:Times;
}
.helper {
position: relative;
padding: 5px;
width: 15px; height:15px;
cursor:pointer;
}
#loading-image {
margin:0 auto;
background-color: #c0dabd;
width: 128px;
height: 128px;
z-index: 50;
position:absolute;
left:45%;
top:40%;
margin:-0px 0 0 -0px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px; /* future proofing */
-khtml-border-radius: 10px;
}
//FRNAKCHECK!!!
input[type=checkbox] {
visibility: hidden;
}
.frnakcheckbox {
width: 24px;
height: 22px;
background: #fcfff4;
background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );
margin: -12px 5px auto;
-webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
-moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
position: absolute;
}
.frnakcheckbox label {
cursor: pointer;
position: absolute;
width: 20px;
height: 20px;
left: 2px;
top: 0px;
-webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
-moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
background: -webkit-linear-gradient(top, #222 0%, #45484d 100%);
background: -moz-linear-gradient(top, #222 0%, #45484d 100%);
background: -o-linear-gradient(top, #222 0%, #45484d 100%);
background: -ms-linear-gradient(top, #222 0%, #45484d 100%);
background: linear-gradient(top, #222 0%, #45484d 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222', endColorstr='#45484d',GradientType=0 );
}
.frnakcheckbox label:after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
content: '';
position: absolute;
width: 16px;
height: 16px;
background: #00bf00;
background: -webkit-linear-gradient(top, #00bf00 0%, #009400 100%);
background: -moz-linear-gradient(top, #00bf00 0%, #009400 100%);
background: -o-linear-gradient(top, #00bf00 0%, #009400 100%);
background: -ms-linear-gradient(top, #00bf00 0%, #009400 100%);
background: linear-gradient(top, #00bf00 0%, #009400 100%);
top: 2px;
left: 2px;
-webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
-moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
}
.frnakcheckbox label:hover::after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
filter: alpha(opacity=30);
opacity: 0.3;
}
.frnakcheckbox input[type=checkbox]:disabled{
background: #FFFFFF;
background: -webkit-linear-gradient(top, #ffffff 0%, #009400 100%);
background: -moz-linear-gradient(top, #ffffff 0%, #009400 100%);
background: -o-linear-gradient(top, #ffffff 0%, #009400 100%);
background: -ms-linear-gradient(top, #ffffff 0%, #009400 100%);
background: linear-gradient(top, #ffffff 0%, #009400 100%);
}
.frnakcheckbox input[type=checkbox]:checked + label:after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}
.checklabel {
margin: -10px 40px auto;
}
<div id="" style="overflow:auto; height:300px; display: inline-block;">
<b>Sample Text:</b><span class="helper" id="help1" style="color:blue;"><b>?</b></span>
<br>
<br>
<br>
<div class="fcheckbox">
<input type="checkbox" value="library_522">
<label for="control522"></label>
</div>
<div class="checklabel">522</div>
<br>
<div class="fcheckbox">
<input type="checkbox" value="library_523">
<label for="control523"></label>
</div>
<div class="checklabel">523</div>
<br>
</div>
This ends up looking like this: http://imgur.com/EPZ3SnQ
Notice that the actual check boxes aren't contained by the div but the labels are!
This is the CSS for the radio buttons: http://pastebin.com/up29LWCD
I am new to css and haven't quite gotten to understand how positioning works. Any help would be appreciated! I have tried a varying combination of style tags with no real progress...
They seem to work fine if you use them in a container and set the overflow?
/**
* Menu Styles
*/
.container {
margin: 10px;
border: 1px solid black;
height: 100px;
width: 100px;
overflow-y: scroll;
}
/**
* FRNAKCHECK
*/
.frnakcheckbox {
width: 24px;
height: 22px;
background: #fcfff4;
background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#fcfff4', endColorstr='#b3bead', GradientType=0);
margin: -12px 5px auto;
-webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
-moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
position: absolute;
}
.frnakcheckbox label {
cursor: pointer;
position: absolute;
width: 20px;
height: 20px;
left: 2px;
top: 0px;
-webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 1);
-moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 1);
box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 1);
background: -webkit-linear-gradient(top, #222 0%, #45484d 100%);
background: -moz-linear-gradient(top, #222 0%, #45484d 100%);
background: -o-linear-gradient(top, #222 0%, #45484d 100%);
background: -ms-linear-gradient(top, #222 0%, #45484d 100%);
background: linear-gradient(top, #222 0%, #45484d 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#222', endColorstr='#45484d', GradientType=0);
}
.frnakcheckbox label:after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
content: '';
position: absolute;
width: 16px;
height: 16px;
background: #00bf00;
background: -webkit-linear-gradient(top, #00bf00 0%, #009400 100%);
background: -moz-linear-gradient(top, #00bf00 0%, #009400 100%);
background: -o-linear-gradient(top, #00bf00 0%, #009400 100%);
background: -ms-linear-gradient(top, #00bf00 0%, #009400 100%);
background: linear-gradient(top, #00bf00 0%, #009400 100%);
top: 2px;
left: 2px;
-webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
-moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
}
.frnakcheckbox label:hover::after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
filter: alpha(opacity=30);
opacity: 0.3;
}
.frnakcheckbox input[type=checkbox]:disabled {
background: #FFFFFF;
background: -webkit-linear-gradient(top, #ffffff 0%, #009400 100%);
background: -moz-linear-gradient(top, #ffffff 0%, #009400 100%);
background: -o-linear-gradient(top, #ffffff 0%, #009400 100%);
background: -ms-linear-gradient(top, #ffffff 0%, #009400 100%);
background: linear-gradient(top, #ffffff 0%, #009400 100%);
}
.frnakcheckbox input[type=checkbox]:checked + label:after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}
.checklabel {
margin: -10px 40px auto;
}
<b>Sample Text:</b>
<span class="helper" id="help1" style="color:blue;"><b>?</b></span>
<div class="container">
<div class="fcheckbox">
<input type="checkbox" value="library_522">
<label for="control522">522</label>
</div>
<br>
<div class="fcheckbox">
<input type="checkbox" value="library_523">
<label for="control523">523</label>
</div>
<div class="fcheckbox">
<input type="checkbox" value="library_522">
<label for="control522">522</label>
</div>
<br>
<div class="fcheckbox">
<input type="checkbox" value="library_523">
<label for="control523">523</label>
</div>
<div class="fcheckbox">
<input type="checkbox" value="library_522">
<label for="control522">522</label>
</div>
<br>
<div class="fcheckbox">
<input type="checkbox" value="library_523">
<label for="control523">523</label>
</div>
<div class="fcheckbox">
<input type="checkbox" value="library_522">
<label for="control522">522</label>
</div>
<br>
<div class="fcheckbox">
<input type="checkbox" value="library_523">
<label for="control523">523</label>
</div>
<br>
</div>
I have a code to modify but it is not working
HTML
<input type="radio" id="radio-1-1" name="radio-1-set" class="regular-radio" checked />
Css
.regular-radio:checked:after {
content: ' ';
width: 12px;
height: 12px;
border-radius: 50px;
position: absolute;
top: 3px;
background: #99a1a7;
box-shadow: inset 0px 0px 10px rgba(0,0,0,0.3);
text-shadow: 0px;
left: 3px;
font-size: 32px;
}
.regular-radio:checked {
background-color: #e9ecee;
color: #99a1a7;
border: 1px solid #adb8c0;
box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1), inset 0px 0px 10px rgba(0,0,0,0.1);
}
I need radio box like :-
Let me know how can I do this ?
Thanks.
It is possible in css, but not for all the browsers.
The effect on all browsers:
http://www.456bereastreet.com/lab/form_controls/checkboxes/
A possibility is a custom checkbox with javascript, example:
http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/
You can do it without javascript.
By default HTML works so that your label will trigger the input. This means that you can hide your input, and put a psudo element on you label. In that way you can style whatever radio button / checkbox you would like.
Now I didn't test the below code, put it should be close to this.
By the way. The reason for not displaying none on the input, is because it makes IOS crash, for some reason.
<label for="test">
<input type="radio" id="test" />
</label>
CSS
input {
position: absolute;
left: - 999em;
}
label {
position relative;
padding-left: 30px;
}
label:before {
content: "";
display: block;
height: 10px;
width: 10px;
background: url(yourBackgroundImage.png) no-repeat 0 0;
position: absolute;
left: 0;
top: 2px;
}
I think it is a rounded check box. Not a radio button. Here is how it did.
Here is the jsfiddle: http://jsfiddle.net/X55am/
Here is some extra: http://codepen.io/bbodine1/pen/novBm
html
<div class="roundedTwo">
<input type="checkbox" value="None" id="roundedTwo" name="check" />
<label for="roundedTwo"></label>
</div>
css
body {
background: #555;
}
input[type=checkbox] {
visibility: hidden;
}
/* ROUNDED TWO */
.roundedTwo {
width: 28px;
height: 28px;
background: #fcfff4;
background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );
margin: 20px auto;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
-webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
-moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
position: relative;
}
.roundedTwo label {
cursor: pointer;
position: absolute;
width: 20px;
height: 20px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
left: 4px;
top: 4px;
-webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
-moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
background: -webkit-linear-gradient(top, #222 0%, #45484d 100%);
background: -moz-linear-gradient(top, #222 0%, #45484d 100%);
background: -o-linear-gradient(top, #222 0%, #45484d 100%);
background: -ms-linear-gradient(top, #222 0%, #45484d 100%);
background: linear-gradient(top, #222 0%, #45484d 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222', endColorstr='#45484d',GradientType=0 );
}
.roundedTwo label:after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
content: '';
position: absolute;
width: 9px;
height: 5px;
background: transparent;
top: 5px;
left: 4px;
border: 3px solid #fcfff4;
border-top: none;
border-right: none;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.roundedTwo label:hover::after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
filter: alpha(opacity=30);
opacity: 0.3;
}
.roundedTwo input[type=checkbox]:checked + label:after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}