After following various online tutorials on how to style my Radio buttons and Checkboxes. I have managed with the following code:
.radio input {
-webkit-appearance: none;
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: 7px;
border-radius: 50px;
display: inline-block;
position: relative;
outline: none;
margin-right: 10px;
margin-top: 6px;
}
.radio input:checked:after {
content: ' ';
width: 10px;
height: 10px;
border-radius: 50px;
position: absolute;
top: 2px;
background: #99a1a7;
box-shadow: inset 0px 0px 10px rgba(0,0,0,0.3);
text-shadow: 0px;
left: 2px;
font-size: 32px;
}
.radio input: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);
}
This works for modern browsers, it gives me the following:
Unfortunately I must support IE8 too, and the above does not work for IE8. I know that the :checked pseudo element does not work for IE8, so I have the following script that is supposed to provide me with that functionality.
I also have a conditional CSS comment that brings in a stylesheet specifically for IE8.
<!--[if IE 8]>
<link href="#Url.Content("~/Content/ie8-styles.css")" rel="stylesheet" type="text/css" />
<![endif]-->
The first thing I want to know is, does IE8 support something like this (bear in mind the JS script)?
.radio input:checked:after {
content: "boo";
width: 10px;
height: 10px;
border-radius: 50px;
position: absolute;
top: 2px;
background: #99a1a7;
box-shadow: inset 0 0 10px rgba(0, 0, 0, .3);
text-shadow: 0;
left: 2px;
font-size: 32px;
}
I'm curious if it'll read the double pseudo elements of :checked:after because right now I don't see the word boo before my radio buttons!
As you are not opposed to using JS, you might want to checkout http://selectivizr.com/. We have used this in several projects that require older browser support and functional custom style checkboxes/radios.
I normally use the 'hide the input' and use an image on larger projects, but for simpler projects that run on IE8, I use the following CSS, and it works perfect. This has a negligible effect on newer browsers. The height/width has no effect unless you add the background-color. This would be great for an IE8 specific style-sheet.
input[name="bdu"] {height:1em; width:1em; background-color:#000;}
And the html..
<input name='bdu' type='radio' value='S'/> SET
Here are 3 examples, pulled right off a working page.. No CSS, 1em and 2em.
Related
I'm using ajax and jquery UI to search and select in the input field. How can I style the drop down thing to not to show me <ul> bullets and also have a white background? I have been trying to target the search field using ID but it changes the input box and not the drop down box. I'm attaching the screenshot here.
A css solution
change the list style type on you li tags to none. and add a white background to your ul tag
li {
list-style-type: none
}
ul {
background: white;
}
<ul>
<li>Option</li>
</ul
If someone like me is struggling with jQuery UI stylying for Ajax calls, here is bootstrap code which I'm copy pasting from a blog and it is working perfectly for me.
.ui-autocomplete {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
float: left;
display: none;
min-width: 160px;
padding: 4px 0;
margin: 0 0 10px 25px;
list-style: none;
background-color: #ffffff;
border-color: #ccc;
border-color: rgba(0, 0, 0, 0.2);
border-style: solid;
border-width: 1px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
*border-right-width: 2px;
*border-bottom-width: 2px;
}
.ui-menu-item > a.ui-corner-all {
display: block;
padding: 3px 15px;
clear: both;
font-weight: normal;
line-height: 18px;
color: #555555;
white-space: nowrap;
text-decoration: none;
}
.ui-state-hover, .ui-state-active {
color: #ffffff;
text-decoration: none;
background-color: #0088cc;
border-radius: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
background-image: none;
}
I'm trying to write a code for a page:
show a button and embedded youtube video, once the user clicks on it, he goes to a link (not youtube) and the video disappears.
also there is a button to remove the video.
I've managed to make the video clickable to a link, but the problem that the video doesn't get removed - not when clicked on and not when clicking on the button.
.the-click {
position: absolute;
left: 0px;
right: 0px;
width: 100%;
height: 100%;
z-index: 999;
background-color: white;
opacity: 0;
}
.container {
position: relative;
}
.myxButton {
-moz-box-shadow: inset 0px 1px 0px -1px #cf866c;
-webkit-box-shadow: inset 0px 1px 0px -1px #cf866c;
box-shadow: inset 0px 1px 0px -1px #cf866c;
background-color: #d0451b;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
border: 1px solid #942911;
display: inline-block;
cursor: pointer;
color: #ffffff;
font-family: Arial;
font-size: 16px;
font-weight: bold;
padding: 5px 24px;
text-decoration: none;
text-shadow: 0px 1px 0px #854629;
}
.myxButton:hover {
background-color: #bc3315;
}
.myxButton:active {
position: relative;
top: 1px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<center>
<button class="myxButton" onclick=$( '#div1').remove();>« Stop Video »</button>
<div id="div1" align="center" class="container" onclick=$( '#div1').remove();>
<iframe width="560" height="315" src="http://www.youtube.com/embed/UKftOH54iNU?modestbranding=1&autoplay=1&controls=0&fs=0&rel=0&showinfo=0&disablekb=1&wmode=opaque" frameborder="0"></iframe>
</div>
</center>
Console result when clicking
I've also tried:
onclick="$('#div1').remove();"
onclick='$('#div1').remove();'
#same with# onclick=$('#div1').hide();
Thanks
Use this syntax. remove your inline onClick attribute from the button and use jquery to add the event listener.
Your button HTML should be just
<button class="myxButton">« Stop Video »</button>
The reason for asking to remove the inline attribute is because its deprecated already (but still few browsers support it), But in future almost all browsers will stop supporting it. Also this way we keep the HTML and JavaScript code separate which is good for maintenance.
Here is a working snippet.
$('.myxButton').on('click',function(){
$('#div1').remove();
});
.the-click {
position: absolute;
left: 0px;
right: 0px;
width: 100%;
height: 100%;
z-index: 999;
background-color: white;
opacity: 0;
}
.container {
position: relative;
}
.myxButton {
-moz-box-shadow: inset 0px 1px 0px -1px #cf866c;
-webkit-box-shadow: inset 0px 1px 0px -1px #cf866c;
box-shadow: inset 0px 1px 0px -1px #cf866c;
background-color: #d0451b;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
border: 1px solid #942911;
display: inline-block;
cursor: pointer;
color: #ffffff;
font-family: Arial;
font-size: 16px;
font-weight: bold;
padding: 5px 24px;
text-decoration: none;
text-shadow: 0px 1px 0px #854629;
}
.myxButton:hover {
background-color: #bc3315;
}
.myxButton:active {
position: relative;
top: 1px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<center>
<button class="myxButton">« Stop Video »</button>
<div id="div1" align="center" class="container">
<iframe width="560" height="315" src="http://www.youtube.com/embed/UKftOH54iNU?modestbranding=1&autoplay=1&controls=0&fs=0&rel=0&showinfo=0&disablekb=1&wmode=opaque" frameborder="0"></iframe>
</div>
</center>
For the "range" input element in HTML5, there is a nice way to style the thumb and track separately. The only problem being it works differently on different browsers.
Daniel Stern has done some great work on this. Also he's written an online tool which generates the basic css styles for cross browser range input styling- range.css, I'm using these styles but I'm facing a few problems when using the z-index parameter.
In the webkit styles, its easy to give different z-index values to the thumb and track by setting the position to relative and assigning a z-index value.
This method doesn't work in the Firefox styles. Firefox would just ignore the z-index values of the track and thumb.
I am trying to draw a div element on the lower half of the range slider to make the lower and upper halves look different. So effectively i want my z-index values to be like this track < div < thumb
I have written a codepen to show this behavior. Its working perfectly in Chrome/Safari, but not in Firefox. Try opening it in Chrome/Safari to see how I it should behave in Firefox.
http://codepen.io/anon/pen/vOmQxr
How can i achieve similar behavior for Firefox? or is there any other way to style the upper and lower halves of the range slider separately for Firefox?(without external libs)
I know you asked this question a while ago but I actually spent some time to find a workaround solution for this issue.
The issue is z-index with pseudo elements of input range works differently on Firefox and Chrome. What you will have to do is to make the input range track's background to be transparent. Create a div divFill that will replicate the track and make it the lowest z-index. Then, divLowerFill is the next highest z-index. After that, put the input field as the next highest z-index. Since we made the background color for input range to be transparent, the lower elements should be visible. Of course, make the thumb pseudo element to be the highest z-index.
Although I didn't debug this on IE but the concept should work. Here's code snippet that I made some modifications on your Codepen code.
document.getElementById("rangeinput").addEventListener("input", function(e){
var rangeInput=document.getElementsByClassName("divLowerFill")[0]; rangeInput.style.width=e.target.offsetWidth*e.target.value/100 +"px";
});
.parent {
display:inline-block;
margin-left: 35px;
position:relative;
}
/* repplicating input range track background */
.divFill {
position: absolute;
width: 100%;
height: 6px;
top: 7px;
z-index: -2;
background: #00c9ff;
}
/* track fill */
.divLowerFill {
position: absolute;
height: 6px;
width: 70px;
top: 7px;
background-color: #273042;
z-index: 0;
pointer-events:none;
}
/* input range track style settings */
input[type=range] {
-webkit-appearance: none;
width: 70px;
margin: 2px 0;
vertical-align: middle;
position: relative;
background-color: transparent;
}
input[type=range]:focus {
outline: none;
}
/* Chrome, Safari track style settings */
input[type=range]::-webkit-slider-runnable-track {
width: 100px;
height: 6px;
cursor: pointer;
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
border-radius: 0px;
z-index: 1;
border: 0px solid rgba(0, 0, 0, 0);
}
input[type=range]::-webkit-slider-thumb {
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
border: 0px solid rgba(255, 255, 255, 0);
height: 10px;
width: 10px;
border-radius: 5px;
background: #ffffff;
cursor: pointer;
-webkit-appearance: none;
margin-top: -2px;
z-index: 2000;
position: relative;
}
/* Firefox track style settings */
input[type=range]::-moz-range-track {
width: 100%;
height: 6px;
cursor: pointer;
background: none transparent;
border-radius: 0px;
border: 0px solid rgba(0, 0, 0, 0);
position: relative;
z-index: -1;
}
input[type=range]::-moz-range-thumb {
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
border: 0px solid rgba(255, 255, 255, 0);
height: 10px;
width: 10px;
border-radius: 5px;
background: #ffffff;
/*cursor: pointer;*/
position: relative;
z-index: 100;
}
/* IE style settings */
input[type=range]::-ms-track {
width: 100%;
height: 6px;
cursor: pointer;
background: transparent;
border-color: transparent;
color: transparent;
}
input[type=range]::-ms-fill-lower {
background: #00c5fa;
border: 0px solid rgba(0, 0, 0, 0);
border-radius: 0px;
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}
input[type=range]::-ms-fill-upper {
background: #00c9ff;
border: 0px solid rgba(0, 0, 0, 0);
border-radius: 0px;
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}
input[type=range]::-ms-thumb {
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
border: 0px solid rgba(255, 255, 255, 0);
height: 10px;
width: 10px;
border-radius: 5px;
background: #ffffff;
cursor: pointer;
height: 6px;
z-index: 2000;
position: relative;
}
input[type=range]:focus::-ms-fill-lower {
background: #00c9ff;
}
input[type=range]:focus::-ms-fill-upper {
background: #05caff;
}
<div class="parent">
<div class="divFill"></div>
<div class="divLowerFill"></div>
<input id="rangeinput" type="range" min=0 max=100 value=100>
</div>
I'm trying to create an autocomplete text field using typeahead.js. The examples here show suggestion lists that are nicely formatted. However, when I use the same code, I only get a bland list of suggestions like so:
Please see this jsFiddle for the code.
I'm using Bootstrap with it. What do I have to do to get a list that is formatted the Bootstrap way?
It looks like the default output has no styling at all and the .tt class has to be used to style the list. I got the following code by inspecting the element I wanted, tweak to suit your needs.
.tt-query,
.tt-hint {
width: 396px;
height: 30px;
padding: 8px 12px;
font-size: 24px;
line-height: 30px;
border: 2px solid #ccc;
border-radius: 8px;
outline: none;
}
.tt-query {
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.tt-hint {
color: #999
}
.tt-dropdown-menu {
width: 422px;
margin-top: 12px;
padding: 8px 0;
background-color: #fff;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 8px;
box-shadow: 0 5px 10px rgba(0,0,0,.2);
}
.tt-suggestion {
padding: 3px 20px;
font-size: 18px;
line-height: 24px;
}
.tt-suggestion.tt-cursor {
color: #fff;
background-color: #0097cf;
}
.tt-suggestion p {
margin: 0;
}
What is the best way to customize a radio box like this. It should be for ie10, chrome, firefox.
I cant make everything by by own with css and javascript. is there a better way ?
concept:
Hide inputs, and style labels:
input[type='checkbox']{
display: none;
}
label{
border: 1px solid #ddd;
padding: 10px;
position: relative;
padding-left: 36px;
}
label::before{
position: absolute;
left: 10px;
top: 10px;
content: '';
box-shadow: 0px 0px 2px #999;
border: 2px solid #fff;
width: 12px;
height: 12px;
}
input:checked + label::before{
background: #ccc;
}
DEMO
I recently tried something like this and the following tutorials helped me
http://css-tricks.com/snippets/css/custom-radio-buttons/
http://www.hongkiat.com/blog/css3-checkbox-radio/
In my case I used the background-image solution