I can't find a way to make the checkboxes checked in IE8. It's based on a Google Form, I re-used the same code to easily have an answer sheet. On top of that, the answers aren't sent.
I use this code
<li class="ss-choice-item">
<label>
<span class="ss-choice-item-control goog-inline-block">
<input type="checkbox" name="entry.637692828" value="Facebook" id="group_637692828_2" role="checkbox" class="ss-q-checkbox">
<label for="group_637692828_2"></label>
</span>
<span class="ss-choice-label">Facebook</span>
</label>
</li>
Here is the CSS, I wanted to custom the buttons, it works really fine in all other browsers.
.ss-q-checkbox {
display: none;
}
.ss-q-checkbox + label {
background-color: #fafafa;
border: 1px solid #cacece;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
padding: 9px;
border-radius: 3px;
display: inline-block;
position: relative;
margin-right: 4px;
}
.ss-q-checkbox + label:active, .ss-q-checkbox:checked + label:active {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px 1px 3px rgba(0, 0, 0, 0.1);
}
.ss-q-checkbox:checked + label {
background-color: #e9ecee;
border: 1px solid #adb8c0;
color: #f87000;
}
.ss-q-checkbox:checked + label:after {
content:'\2714';
font-size: 14px;
position: absolute;
top: 0px;
left: 3px;
color: #f87000;
}
Could someone have the solution?
Thanks :)
You cannot use display:none (or visibility:hidden) on inputs with IE8 as it will treat it as if the input isn't there. Instead of hiding it using display try the following:
.ss-q-checkbox {
position:fixed; left:100%; top:0;
}
Related
How do i make my checkboxes transparant? It does work with text fields and buttons but it doesnt seem to work with checkboxes.
This is the form of my code.
#checkbox {
width: 20px;
height: 20px;
cursor: pointer;
vertical-align: bottom;
color: black;
background-color: rgba(0, 0, 0, 0.08);
}
<div class="checkbox check-transparent">
<label>
<input type="checkbox" id="checkbox">Onthoud mij
</label>
</div>
The only thing that can be done for a regular checkbox is making it transparent by decreasing its opacity but it also lightens the tick mark inside if checked. A workaround is, having the checkbox wrapped in a div and changing the color of the checkbox when checked like shown in the snippet below:
#checkb {
width: 20px;
height: 20px;
cursor: pointer;
background: rgba(40,40,40,0.2);
color:black;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none;
position: relative;
left: -5px;
top: -5px;
}
#checkb:checked {
background: rgba(40,40,40,0.7);
}
.checkbox-container {
position: absolute;
display: inline-block;
margin: 20px;
width: 100px;
height: 100px;
overflow: hidden;
}
<div class="checkbox-container">
<input type="checkbox" id="checkb"/> Input
</div>
You can also (classic method that allows to restyle a checkbox crossbrowser following standards)
take input ahead and outside the label
link the label to its input via attribute for
use a pseudo on label to draw a checkbox via css and also apply size and background.
hide the checkbox
label {
display: inline-block;
}
#checkbox {
display: none;
}
label:before {
content: '';
cursor: pointer;
vertical-align: bottom;
color: black;
background-color: rgba(0, 0, 0, 0.1);
/* average checkbox styling */
line-height: 1.1em;
font-weight: bold;
text-align: center;
font-size: 20px;
height: 20px;
width: 20px;
display: inline-block;
box-shadow: inset 0 0 1px 1px rgb(153, 154, 154), inset 0 0 1px 2px white, inset 0 0 1px 2px white, inset 2px 2px 1px 1px rgb(182, 187, 192), inset -1px -1px 2px 1px rgb(182, 187, 192), inset 8px 8px 4px -4px rgb(182, 187, 192);
box-sizing: border-box;
}
:checked+label:before {
content: '\2713';
color: rgb(74, 95, 151);
}
:checked+label {
color: rgb(74, 95, 151);
}
label:hover {
color: rgb(28, 50, 125);
}
label:hover:before {
box-shadow: inset 0 0 1px 1px rgb(95, 133, 156), inset 0 0 1px 2px rgb(198, 237, 252), inset 0 0 1px 2px rgb(198, 237, 252), inset 2px 2px 1px 1px rgb(134, 203, 246), inset -1px -1px 2px 1px rgb(134, 203, 246), inset 8px 8px 4px -4px rgb(134, 203, 246);
}
<div class="checkbox check-transparent">
<input type="checkbox" id="checkbox">
<label for="checkbox"> Onthoud mij
</label>
</div>
In this button a shadow appearing and it looks like another button border there. I tried to use box-shadow property but I failed.
I used this CSS
a {
padding: 10px 40px;
border-radius: 30px;
font-size: 18px;
color: #fff;
border: 1px solid #fff;
box-shadow: 5px 5px 0px #2CBFBB;
}
Can anyone please help me?
You can achieve this effect with filter: drop-shadow and a transparent background:
body {
background: #76D7C4;
}
button {
text-transform: uppercase;
padding: 10px 20px;
color: white;
cursor: pointer;
background: transparent; /* no background! */
border: 1px solid white;
border-radius: 100px;
filter: drop-shadow(5px 5px 1px rgba(0, 0, 0, 0.25));
}
<button>Learn More</button>
Based on chazsolo's answer. It's possible to get shadow on button without shadow on text using absolutely positioned pseudoelement and CSS property inheritance:
body {
background: #76d7c4;
}
button {
text-transform: uppercase;
padding: 10px 20px;
color: white;
cursor: pointer;
background: transparent; /* no background! */
border: 1px solid white;
border-radius: 100px;
position: relative; /* new */
}
button:after {
content: "";
position: absolute;
/* Making pseudoelement the same size as container */
left: 0;
right: 0;
top: 0;
bottom: 0;
/* Inheriting border properties */
border-radius: inherit;
border: inherit;
/* Applying filter with shadow */
filter: drop-shadow(5px 5px 1px rgba(0, 0, 0, 0.25));
}
<button>Learn More</button>
You can also do it by combining box-shadow: ... and box-shadow: inset .... Just adjust the box-shadow so it fits your needs.
Example
body {
background: #32DBD7;
}
button {
background: transparent;
color: #fff;
border: 3px solid #fff;
border-radius: 35px;
padding: 10px 40px;
font-size: 34px;
box-shadow: 3px 3px 4px rgba(0, 0, 0, .25), inset 3px 3px 4px rgba(0, 0, 0, .25);
-moz-box-shadow: 3px 3px 4px rgba(0, 0, 0, .25), inset 3px 3px 4px rgba(0, 0, 0, .25);
-webkit-box-shadow: 3px 3px 4px rgba(0, 0, 0, .25), inset 3px 3px 4px rgba(0, 0, 0, .25);
}
<button>Learn More</button>
.test { margin-top: 2em; }
a {
padding: 10px 40px;
border-radius: 30px;
font-size: 18px;
color: #fff;
border: 1px solid #fff;
box-shadow: 5px 5px 0 darkgray;
text-decoration: none;
}
body {
background-color: #2CBFBB;
}
<div class="test">
Learn More
</div>
I have HTML and CSS code that I've used to build a custom checkbox. I believe my code has the correct web-kits but it doesn't seem to work on FireFox.
Here's the code:
HTML
<input type='checkbox' style="float: left" class='regular-checkbox big-checkbox'
checked='checked' id='product-45-45' name='product_id_page-0[45-45]'
value='45-45' data-first_price="11.99" data-second_price="" data-paysys="" />
CSS
.regular-checkbox {
-webkit-appearance: none;
-moz-appearance: none;
background-color: #fafafa;
border: 1px solid #cacece;
box-shadow: 0 1px 2px rgba(0,0,0,0),inset 0 -15px 10px -12px rgba(0,0,0,0);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0),inset 0 -15px 10px -12px rgba(0,0,0,0);
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0),inset 0 -15px 10px -12px rgba(0,0,0,0);
padding: 9px;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
display: inline-block;
position: relative;
}
.regular-checkbox:active,
.regular-checkbox:checked:active {
box-shadow: 0 1px 2px rgba(0,0,0,0),inset 0 1px 3px rgba(0,0,0,0);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0),inset 0 1px 3px rgba(0,0,0,0);
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0),inset 0 1px 3px rgba(0,0,0,0);
}
.regular-checkbox:checked {
background-color: #e9ecee;
box-shadow: 0 1px 2px rgba(0,0,0,0),inset 0 -15px 10px -12px rgba(0,0,0,0),inset 15px 10px -12px rgba(255,0,0,0);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0),inset 0 -15px 10px -12px rgba(0,0,0,0),inset 15px 10px -12px rgba(255,0,0,0);
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0),inset 0 -15px 10px -12px rgba(0,0,0,0),inset 15px 10px -12px rgba(255,0,0,0);
}
.regular-checkbox:checked:after {
content: '\2714';
font-size: 14px;
position: absolute;
top: 0;
left: 3px;
color: #19a73e;
}
.big-checkbox {
padding: 18px;
}
.big-checkbox:checked:after {
font-size: 37px;
top: -7px;
left: 2px;
}
Screen shot of the desired outcome (works in Chrome):
Try use this code, I don't know explain, but I did one version for you ;)
.regular-checkbox{
display: inline-block;
border-radius: 50%;
width: 38px;
height: 38px;
border: 1px solid #ccc;
}
.regular-checkbox input{
opacity: 0;
position: absolute;
}
.regular-checkbox small{
width: 100%;
height: 100%;
float: left;
}
.regular-checkbox input:checked ~ small:after{
content: '\2714';
height: 38px;
width: 38px;
color: green;
font-size: 26px;
text-align: center;
float: left;
}
<label class="regular-checkbox">
<input type="checkbox">
<small></small>
</label>
This is a known issue in Firefox - there's a workaround with using <label> and <span>.
MDN also mentions that styling some form elements is a bit of a pain - read more here.
.checkbox input[type="checkbox"] {
display: none;
}
.checkbox span {
background-color: #fafafa;
border: 1px solid #cacece;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0), inset 0 -15px 10px -12px rgba(0, 0, 0, 0);
padding: 22px;
-webkit-border-radius: 50%;
border-radius: 50%;
display: inline-block;
position: relative;
}
.checkbox :active + span,
.checkbox :checked:active span {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0), inset 0 1px 3px rgba(0, 0, 0, 0);
}
.checkbox :checked + span {
background-color: #e9ecee;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0), inset 0 -15px 10px -12px rgba(0, 0, 0, 0), inset 15px 10px -12px rgba(255, 0, 0, 0);
}
.checkbox :checked + span:after {
content: '\2714';
font-size: 14px;
position: absolute;
top: 0;
left: 0px;
width: 100%;
color: #19a73e;
text-align: center;
}
.big-checkbox {
padding: 18px;
}
.big-checkbox:checked + span:after {
font-size: 37px;
}
<label class="checkbox" for="product-45-45">
<input type='checkbox' style="float: left" class='regular-checkbox big-checkbox' checked='checked' id='product-45-45' name='product_id_page-0[45-45]' value='45-45' data-first_price="11.99" data-second_price="" data-paysys="" />
<span></span>
</label>
I would like to assign a pseudo-css class to a <label> within a div with a a specific #id
My markup:
<div id="square">
<input class="time" id="show_45min" type="checkbox" name="time" value="45min">
<label for="show_45min" class="square">45 min</label><br>
<input class="time" id="show_60min" type="checkbox" name="time" value="60min">
<label for="show_60min" class="square">60 min</label><br>
</div>
and the css:
#square input[type=radio] {
display: none;
}
#square label:before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
margin-right: 10px;
position: absolute;
left: 0;
bottom: 1px;
background-color: #aaa;
box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
}
problem is, that still every label on the page gets the content of label:before. But I just want it to assign to the labels within the div.
Thanks
http://jsbin.com/luhib/1/edit
input[id^=show_]{
display:none;
}
label[for^=show_]:before {
content: "";
display: inline-block;
vertical-align:baseline;
width: 1em;
height: 1em;
margin-right: 10px;
background-color: #aaa;
box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
}
input[id^=show_]:checked + label.square:before {
box-shadow: inset 0px 2px 15px 0px rgba(255, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
}
You may want to use the > direct child selector:
#square > label:before
More from MDN
The > combinator separates two selectors and matches only those
elements matched by the second selector that are direct children of
elements matched by the first. By contrast, when two selectors are
combined with the descendant selector, the combined selector
expression matches those elements matched by the second selector for
which there exists an ancestor element matched by the first selector,
regardless of the number of "hops" up the DOM.
Change this
#square label:before
to
#square > label:before
I'm customizing a checkbox and it seems to be functioning but the unicode check isn't working... it's appearing as the text "\2714".
Here's my code:
.edd_price_option_1762 {
-webkit-appearance: none;
background-color: #fafafa;
border: 3px solid #fff;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
padding: 9px;
border-radius: 0px;
display: inline-block;
position: relative;
top: 8px;
}
.edd_price_option_1762:active, .edd_price_option_1762:checked:active {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px 1px 3px rgba(0, 0, 0, 0.1);
}
.edd_price_option_1762:checked {
background-color: #e9ecee;
border: 3px solid #fff;
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);
color: #99a1a7;
}
.edd_price_option_1762:checked:after {
content:"\2714";
font-size: 19px;
position: absolute;
top: 0px;
left: 3px;
color: #49a6db;
}
You are missing a back slash \ in your markup.
It should be content: "\2714"; currently it is: content: "2714";
jsFiddle demo - the code you posted is correct - it just doesn't match up with that is being implemented on the page.
The dev tools state that your css is:
.edd_price_option_1762:checked:after {
content: "2714 ";
font-size: 19px;
position: absolute;
top: 0px;
left: 3px;
color: #49a6db;
}
Change it to (add a slash):
.edd_price_option_1762:checked:after {
content: "\2714";
font-size: 19px;
position: absolute;
top: 0px;
left: 3px;
color: #49a6db;
}
See attached screenshot:
I don't know whether this will help in any ways. But was experimenting so thought you should see this:
fiddle
Using javascript
document.getElementById('test').innerHTML = "✔"
See if it helps. I read somewhere to use HTML entity :)
some thing like
✔
Have you tried using single quotes? Don't know if it will help, but in my css I'm using content: ' \2714'; and the check mark is showing fine, except in <=IE7 where I use a graphic instead.