A common way to replace a standard input is display:none the input, and then add a background-image to the label.
CSS:
input[type="checkbox"] {
display: none;
}
input[type="checkbox"]+label {
background: url('../images/checkbox_unchecked.png') left center no-repeat;
background-size: 25px;
}
input[type="checkbox"]:checked+label {
background: url('../images/checkbox_checked.png') left center no-repeat;
background-size: 25px;
}
The problem: The HTML is broken afterwards. When i want to change the direction of the elements, I have to change it inside the CSS (background: right).
How can I change the image/style of an input field without make it display:none first, and then change the background image? It has to work in Android 2.3.
EDIT: JSFiddle.
The simple fix for your rtl issue (assuming that is the main problem here, based on your JSFiddle demo), is to also style on the dir attribute when set to "rtl":
.styles[dir="rtl"] input[type="radio"]+label {
background-position: right; /* Set the background position to the right. */
padding-left: 0; /* Reset the left padding on the label. */
padding-right: 35px; /* Give the label some right padding. */
}
JSFiddle demo.
Everything I've used above should work on Android 2.3 according to Can I Use....
You can some css that acts on the rtl attribute:
.styles[dir="rtl"] input[type="radio"]+label {
padding: 0 35px 0 0;
background-position: right center;
}
Here's your demo on jsfiddle: http://jsfiddle.net/ab0xwfcs/2/
I'm not sure about the support of this method, but you could also use the CSS :before instead of setting background positions for each direction.
.styles input[type="radio"] {
display: none;
}
.styles input[type="radio"]+label:before {
content:"";
display:inline-block;
width:25px;
height:25px;
background:red;
}
.styles input[type="radio"]:checked+label:before {
content:"";
display:inline-block;
width:25px;
height:25px;
background:pink;
}
Demo on jsfiddle
You can also use this method on the input itself, without setting it's display to none.
(This will create an extra element, that will hide the default one under.)
input[type="radio"]:after {
content:"";
display:inline-block;
width:25px;
height:25px;
background:gray;
}
input[type="radio"]:checked:after {
content:"";
display:inline-block;
width:25px;
height:25px;
background:pink;
position:relative;
}
Related
Here's what I'm trying to draw with HTML and CSS:
I'm trying to drawn an arc with fill inside it, I've tried using border radius, here's how far I could come .
HTML Code:
<div class="box"></div>
CSS Code:
.box {
width:500px; height:100px;
border:solid 5px #f9955e;
border-color:#f9955e transparent transparent transparent;
border-radius: 50%/100px 100px 0 0;
}
Any help would be appreciated.
How about this:
.box{
position:relative;
background:#fff;
display:block;
width:100px;
height:100px;
border-radius: 50% / 100px 0 0 0;
}
.box::before{
position:absolute;
z-index:-1;
width:100%;
height:100%;
background:#f9955e;
content:"";
}
It doesn't require any change to your html or have the need for a wrapping div. It's just pure CSS.
Here's the jsfiddle: https://jsfiddle.net/h2or0xa1/
Ok, so here's the explanation:
I got rid of your borders, we're not using those any more.
I've set the .box div to have a border radius that creates an arc on the left hand side (assume you know what this is as it's in your example). Set the background of the .box div to white.
Added a ::before pseudo element which essentially creates a div "over the top of" the .box div. To move it behind the div I positioned it absolutely and gave it a z-index of -1 which pushes is behind the .box div. The background colour of this ::before pseudo element is the orange you provided. Essentially the ::before pseudo element creates a div the same size as box, colours it, and pushes is behind .box
You can create the arc using a combination of square and circle overlapping it. The combination can be hidden within a container of half the width and half the height of the square/circle.
JSfiddle Demo
.container {
height: 75px;
overflow: hidden;
width: 75px;
}
.box {
width: 150px;
height: 150px;
background: orange;
position: relative;
z-index: -1;
}
.box::after {
position: absolute;
display: block;
content: " ";
border-radius: 50%;
background: white;
width: 100%;
height: 100%;
}
<div class="container">
<div class="box"></div>
</div>
I Recently try out the div with expand and collapse. Everything works perfect. Here is the fiddle with I make the bar as fixed with expand and collapse button whenever i increase the font size of the div then the button doesn't comes with the div proportionally. Here is the fiddle what i am expect clearly.
http://jsfiddle.net/vicky081/GyG3w/1/
.btnn
{
width: auto;
height: auto;
cursor:pointer;
background-color:#02adea;
position: absolute;
border:solid;
margin-left:3%;
border-color:#ffffff;
border-top-color:#02adea;
top:36px;
text-align: center;
padding-top: 7px;
color:white;
}
You can see that button comes outside the div. Is there is a way to show the button which is attached to the div even if i change the font size.
Any suggestion would be great.
Thanks.
With a top value of 100% the button is always stuck to the container whatever the font-size.
See it live http://jsfiddle.net/LeBen/UCTgR/ (I also added a CSS Normalize)
$(document).ready(function () {
$(".text").hide();
$(".btn").click(function(e){
var txt=$(this).html();
var flag = txt==="open";
if(flag){
$(".text").show();
$(this).html("close");
}
else{
$(".text").hide();
$(this).html("open");
}
});
});
.banner{
font-size:1.2em;
position:fixed;
width:100%;
}
.text {
background:#02adea;
text-align:center;
width:100%;
}
.btn{
background:#02adea;
border:5px solid white;
border-top-color: #02adea;
color:white;
text-align:center;
width:2em;
}
http://jsfiddle.net/GyG3w/5/
I suppose this is the effect you wanted, in this you can change the fixed div's font size as much you want, the rest of the elements' will be resized accordingly and the layout will be preserved
You can use bottom: -49px; instead of top: 36px;
I have a menu item that which I've created using display:table-cell; to ensure that the menu tabs "lengthen" when the user expands the screen. However I need to complete the right side of the tabs to finish the rounded corner at the top. I have a separate tabRight.png which consists of a slice of the right side of the tab. I need to place this right before each "tab opening". I have exhausted everything I know and the closing doors method I found online isn't working for this case. The right side should have a transparent corner so I don't think I can put it over the existing grey background.
The code is:
CSS:
#nav ul{
display:table;
width:100%;
border-spacing: 10px;
margin:0;
padding:0;
}
#nav li{
width:20%;
display:table-cell;
background: url('tab.png') no-repeat;
color:#000;
text-align:center;
height:31px;
}
#nav a{
display:block;
text-decoration:none;
color:black;
}
p{
padding:0px;
margin:0px;
}
HTML:
<div id="nav">
<ul>
<li>
<a href="http://www.google.com">
<div>
<img src="address.png"/>
<p>Deadlines</p>
</div>
</a>
</li>
<li>About</li>
<li>Address</li>
<li>Phone</li>
</ul>
</div>
EDIT:
I have tried the after method and I get the transparent portion overlapping the left background, so as the background shows through the transparency which what I was afraid of.
EDIT 2:
I set the position of the tabRight.png to -10px (10px is the width) and that pushed the edge to the right so the transparency problem no longer occurs.
Thanks guys for your help!
If you can use CSS :after pseudo selector class, then adding position:relative; to your li and the new rule:
#nav li:after {
width:5px;
content:"";
position:absolute;
height:100%;
top:0;
right:0;
}
will add an element on the right of all the list items.
Demo here (with some borders added for clarity)
2 options:
Create a class for the tabRight image.
.tab-right {
width: 5px;
height: 31px;
background: transparent url('tabRight.png') left top no-repeat;
display: inline-block;
zoom: 1; /* for IE7 */
*display: inline; /* for IE6 */
}
Then create a new <li> element:
<li class="tab-right"></li>
Use the :after pseudo-element.
#nav li:after {
content: "";
width: 5px;
height: 31px;
float: left;
background: transparent url('tabRight.png') left top no-repeat;
}
Adjust the width and height to the actual pixel dimensions for your image.
Just add another span inside your LI, set it's margin-right to a negative enough number to accomodate the corner. Set it's with and height accordingly and background the corner image.
I am suggesting this method as it makes scripting any menu functions simpler since all li's will be a menu item
So I've been playing around with web development and I've noticed that in Firefox, my elements are getting pushed to the right versus down, which is what it should be (which happens in Chrome).
I am by no means a Guru. Is there any way to prioritize wrapping versus pushing? I have tried inserting line breaks and setting both to display:block. That does not seem to be the problem.
This is the CSS for the bar:
.tiq-editor-bar
{
z-index:1;
overflow:hidden;
float:left;
width:100%;
border-top: solid 1px #AAA;
text-align:center;
display:none;
position:relative;
color:#AAA;
font-weight:normal;
font-size:14px;
}
This is the CSS for the gallery wrapper (the white out-lined thing)
#tiq-ui-gallery-wrapper
{
min-height: 500px;
background:url(../img/portfolio/empty.png) center no-repeat;
overflow:hidden;
}
And for the gallery itself:
.tiq-theme-gallery
{
width:600px;
height:400px;
resize:vertical;
border:solid 1px #eee;
overflow:auto;
}
Thanks!
EDIT: The gallery is positioned relatively, BTW. I am using Galleria and that gives the container:
.galleria-container {
position: relative;
overflow: hidden;
background: #000;
display:block;
}
EDIT EDIT:
Here is a JSFiddle:
http://jsfiddle.net/RyBz9/2/
Change
.tiq-editor-bar
{
float:left;
}
to
.tiq-editor-bar
{
float:none;
}
Hi i have this a div called "nav" that contains divs with a class "thumbs". Im trying to create a table of contents like div that can be scrolled to display further thumbnails.
this is my CSS so far: (note that each thumbs are position:absolute and is left: positioned accordingly)
#nav {
position:absolute;
width:768px;
height:214px;
bottom:0px;
/*-webkit-transform:translateY(214px);*/
background:gray;
overflow:auto;
}
.thumbs {
position:absolute;
width:80px;
height:100px;
margin:10px 10px 10px 10px;
background:white;
}
I want it to be scrollable so that if the thumbnails exceed 768px (width of nav) it can be scrolled to the left to view more.
Thanks
edit: I forgot to mention that I am doing this in PhoneGap. It will be a mobile app. thanks!
Remove position: absolute; and add float: left; from your thumbs class. That should do it.
UPDATE
If the number of thumbs are known in advance, the inner div's width can be set via CSS. Otherwise, it can be set onload or whenever a thumb is added/removed via JS.
$('#div').css('width', ($('.thumbs').length * $('.thumbs:first').outerWidth(true)) + 'px');
You can achieve this with the combination with max-width, display:inline-block & white-space.
Like this:
#nav_outer {
position:absolute;
bottom:0px;
background:gray;
overflow:auto;
}
#nav {
height:214px;
max-width: 300px;
bottom:0px;
/*-webkit-transform:translateY(214px);*/
background:gray;
white-space:nowrap;
}
.thumbs {
white-space:normal;
display:inline-block;
*display:inline; /*IE7*/
*zoom:1; /*IE7*/
width:80px;
height:100px;
margin:10px 10px 10px 10px;
background:white;
}
http://jsfiddle.net/xzcDD/3/
In my example when the .thumbs less than the width of 300px then there is no scroll