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.
Related
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 code below. It has several divs and css code. The image pic size is about 45kb,small size. So, I want to know, should I use img directly or use the code below. Which one has the faster speed when page loading. Appreciate.
div.smileyface {
width: 300px;
height: 300px;
position: relative;
border-radius: 150px;
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
display: block;
background: #ffe632;
background: -webkit-gradient(linear, left top, left bottom, from(#fffe8d), to(#f6d23e));
background: -moz-linear-gradient(top, #fffe8d, #f6d23e);
box-shadow: inset 0px -14px 14px rgba(0, 0, 0, .3), 0px 2px 20px rgba(0, 0, 0, .6);
-webkit-box-shadow: inset 0px -14px 14px rgba(0, 0, 0, .3), 0px 2px 20px rgba(0, 0, 0, .6);
-moz-box-shadow: inset 0px -14px 14px rgba(0, 0, 0, .3), 0px 2px 20px rgba(0, 0, 0, .6);
}
p.eyes {
width: 50px;
height: 80px;
background: #222;
border-radius: 100px/160px;
-webkit-border-radius: 100px 160px;
-moz-border-radius: 100px/160px;
position: absolute;
top: 40px;
box-shadow: 0 2px 0 rgba(255,255,255, 0.8);
-webkit-box-shadow: 0 2px 0 rgba(255,255,255, 0.8);
-moz-box-shadow: 0 2px 0 rgba(255,255,255, 0.8);
}
p.eyes.lefteye {
left: 75px;
}
p.eyes.righteye {
right: 75px;
}
div.smile {
width: 200px;
height: 70px;
border: 10px solid #222;
border-top: 0;
background: rgba(0,0,0,0);
-moz-border-radius: 0 0 120px 120px / 0 0 90px 90px;
-webkit-border-radius: 0 0 120px 120px 0 0 90px 90px;
border-radius: 0 0 120px 120px / 0 0 90px 90px;
position: absolute;
bottom: 50px;
left: 38px;
box-shadow: 0 2px 0 rgba(255,255,255, 0.8);
-webkit-box-shadow: 0 2px 0 rgba(255,255,255, 0.8);
-moz-box-shadow: 0 2px 0 rgba(255,255,255, 0.8);
}
div.corner {
width: 10px;
height: 30px;
background: #222;
border-radius: 100px/160px;
-webkit-border-radius: 100px 160px;
-moz-border-radius: 100px/160px;
position: absolute;
top: -12px;
-webkit-transform: rotate(65deg);
-moz-transform: rotate(65deg);
left: -12px;
}
div.corner.right {
left: 202px;
-webkit-transform: rotate(-65deg);
-moz-transform: rotate(-65deg);
}
<div class="smileyface">
<p class="eyes lefteye"></p>
<p class="eyes righteye"></p>
<div class="smile">
<div class="corner"></div>
<div class="corner right"></div>
</div>
</div>
According to YSlow, it is a best practice to Minimize HTTP Requests: use CSS sprites, avoid CSS images, combine files etc.
The overall goal should in the end be to optimize page weight, though.
Since the image is 45KB in this case, I would recommend the CSS solution - it is 2148 chars, which is 2KB. If all CSS is in one file, the CSS solution will save you 43KB and 1 HTTP request.
The CSS Solution might get even smaller with a tool such as FormatCSS and by minification.
45KB sounds like a very big file, unnecessary big even. Optimize Images could also be considered.
Here is a detailed explanation of what to use when. Hope it helps:
When to use IMG vs. CSS background-image?
https://www.dropbox.com/s/aqr0444isul1rky/Screenshot%202014-09-23%2022.06.49.png?dl=0
Above is an image of the about us dropdown in the header. When I click it, the below content is currently taking priority over the dropdown menu content.
This should not be the case but it is. Below is a picture of what it looks like when I click it:
https://www.dropbox.com/s/5ud446l7hpz7veg/Screenshot%202014-09-23%2022.08.15.png?dl=0
As you can see it's white and the content below is covering it from showing. There is a little white space but it's not taking up what it should.
I've searched around SO/Google and most answers say to add a higher z-index. I have tried this and it did NOT work.
This is the current CSS for the header (non-bootstrap but it works) and it shows the content properly:
#nav > li > ul {
position: absolute;
border: 5px solid #008553;
border-width: 5px 0px 6px;
padding: 27px 26px 30px 26px;
left: -9999em;
top: 35px;
width: 908px;
background: #f1f7f4;
z-index: 500;
-webkit-box-shadow: 0px 3px 3px 0px rgba(30, 30, 30, 0.3);
-moz-box-shadow: 0px 3px 3px 0px rgba(30, 30, 30, 0.3);
box-shadow: 0px 3px 3px 0px rgba(30, 30, 30, 0.3);
}
What can be the solution to this? There is other CSS from a wordpress website -- how can I tell the dropdown menu to be given priority to take up this space?
try this
.navbar-nav .open .dropdown-menu>li>a,.navbar-nav .open .dropdown-menu {
position: absolute;
border: 5px solid #008553;
border-width: 5px 0px 6px;
padding: 27px 26px 30px 26px;
left: -9999em;
top: 35px;
width: 908px;
background: #f1f7f4;
z-index: 500;
-webkit-box-shadow: 0px 3px 3px 0px rgba(30, 30, 30, 0.3);
-moz-box-shadow: 0px 3px 3px 0px rgba(30, 30, 30, 0.3);
box-shadow: 0px 3px 3px 0px rgba(30, 30, 30, 0.3);
}
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;
}
I want to add drop shadow to input fields, I tried this code
.inp_text{
background: url(../images/inp_back.png) no-repeat;
border: none;
color: #393939;
height: 34px;
padding: 6px 6px 6px 6px;
width: 156px;
}
.inp_text:focus{
background: #fff;
box-shadow: 0 0 5px rgba(0, 0, 255, 1);
-webkit-box-shadow: 0 0 5px rgba(0, 0, 255, 1);
-moz-box-shadow: 0 0 5px rgba(0, 0, 255, 1);
border: 1px solid rgba(0, 0, 255, 0.8);
}
This is working fine in firefox but, I am not getting the blue glow in other browsers(IE & chrome). Please help.
use outline:none; in .inp_text you will find the desire result.
.inp_text{
background: url(../images/inp_back.png) no-repeat;
border: none;
color: #393939;
height: 34px;
padding: 6px 6px 6px 6px;
width: 156px;
outline:none;
}