how can I make a custom checkbox with css only (no JS no JQ) with content:"on" when checked and content:"off" when uncheked.
Thanks.
reedit
OK, after LOT of copy/paste/delete, it work now.
Thank.
input[type=checkbox] {
position: relative;
visibility: hidden;
cursor: pointer;
}
input[type=checkbox]:after {
display: block;
content: "OFF";
position: absolute;
top: 0;
right: -30px;
visibility: visible;
height: 30px;
line-height: 30px;
width: 50px;
text-align: center;
border-radius: 4px;
background: #d00;
color: #fff;
font-weight: 600;
cursor: pointer;
}
input[type=checkbox]:checked:after {
content: "ON";
background: #0a0;
}
<input type="checkbox" />
It is possible. Check out these blog posts by Ryan Seddon. He explain how you can play with checkbox and CSS
http://www.thecssninja.com/css/custom-inputs-using-css
http://www.thecssninja.com/css/futurebox3
http://www.thecssninja.com/css/css-tree-menu
Creating an actual element with CSS isn't possible. You can however style a checkbox using css.
An example:
input[type=checkbox] {
outline: 2px solid #f00;
}
Relying on pure CSS is also a give-or-take when dealing with different browsers and platforms. I hope this answers your question.
I believe this is impossible with just css. Css decorates a html element and does not change its properties. If you click the checkbox, the box will have to do a postback to show it on the page. In which case the css will be the same. You need javascript.
What makes you not want to use javascript?
Related
I have a project where sometimes checkboxes don't have labels. The only way of setting custom image for checkbox I've found was setting image for label:before for corresponding label which has for value with id of checkbox.
Are there any CSS way (at least hacky) to set custom image to checkbox without changing markup? input[type="checkbox"]:before works only in Chrome.
The only way I've found that works everywhere except IE is via setting CSS appearance:
input[type="checkbox"] {
width: 16px;
height: 16px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: red;
}
input[type="checkbox"]:checked {
background-color: green;
}
<input type="checkbox" />
I think it's impossible to do it without label for all browsers. In my opinion label is necessarily.
But you can use JS for this and one of library like icheck (and many other not only jQuery also pure JS)
Maybe if you add a container to your checkbox like this
<div>
<input type="checkbox">
</div>
and then
div{
position: relative;
/* Your custom style */
}
input{
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
opacity: 0;
}
I'm using Less to write CSS, it totally saved much time for me. Now I have small issue, here is my code:
largest fight gym in Australia
Less
.btn{
position: relative;
padding: 15px 22px;
color: #color-black;
&-black-bg{
background: #color-black;
color: #color-white;
}
&-right-skew{
position: relative;
&:after{
content: '';
position: absolute;
right: -10px;
top: 0px;
width: 20px;
height: 100%;
.skewX(-15deg);
}
}
}
Now I my goal is if btn-black-bg so btn-right-skew has black background too. In CSS, I can handle with this code:
.btn-black-bg.btn-right-skew:after{
background: #000;
}
But I don't know how to do this in LESS. Hope everyone can help me out.
Based on your HTML, adding the background: #000 to .btn-black-bg:after (one of the 2 classes) alone is enough but I assume you want to apply some properties only when both classes are present on the same element. For that, you can use the parent selector like below:
.btn {
&-black-bg&-right-skew:after {
background: #000;
color: #fff;
}
}
You cannot nest this into the &-black-bg or &-right-skew (as the order of classes doesn't matter in CSS) and make use of the parent selector because the parent selector would always refer to the full parent and not just the immediate parent. The best that can be done with nesting would be the below but the would need the .btn to be statically added to the innermost selector instead of using &.
.btn {
&-black-bg {
&.btn-right-skew:after {
background: #000;
color: #fff;
}
}
}
You can make use of variables to achieve nesting like mentioned here but I wouldn't recommend it for your scenario because the selector given above is more simple and readable.
I would recomend to separate the clases into a base class "btn" and modifier classes "black-bg" and "right-skew". (In my opinion this makes it easier to understand what is applied and how it can be combined.)
see my axample on codepen: http://codepen.io/fabiandarga/pen/bVNpLE
largest fight gym in Australia<br />largest fight gym in Australia
css:
.btn {
display: inline-block; // added to let the padding affect the height
position: relative;
padding: 15px 22px;
color: #color-black;
&.black-bg{
background: #color-black;
color: #color-white;
}
&.green-bg{
background: #color-green;
color: #color-white;
}
&.right-skew{
position: relative;
&.black-bg { // combine both classes = .right-skew.black-bg
&:after {
background: #color-black;
}
}
&.green-bg:after { // or short form
background: #color-green;
}
&:after {
content: '';
display: block; // was missing;
position: absolute;
right: -10px;
top: 0px;
width: 20px;
height: 100%;
transform: skewX(-15deg); // changed to make it work in the example on codepen
}
}
}
This question already has answers here:
How to change the strike-out / line-through thickness in CSS?
(11 answers)
Closed 8 years ago.
Yesterday with one friend discuss for change height of line about strike-through.
Today searching on documentation of CSS says :
The HTML Strikethrough Element (<s>) renders text with a strikethrough, or a line through it.
Use the <s> element to represent things that are no longer relevant or no longer accurate.
However, <s> is not appropriate when indicating document edits;
for that, use the <del> and <ins> elements, as appropriate.
And seems that <s> accept all reference of CSS but not function on height.
CSS:
s {
color: red;
height: 120px
}
HTML:
<br /><br />
<s >Strikethrough</s>
There is a simpler demo on JSFIDDLE and you see that not change the height of line....
There is a alternative solution or I wrong on CSS?
EXPLAIN WITH IMAGE
I think the best way to handle this is to use a pseudo element to simulate the desired behavior.
s {
color: red;
display: inline-block;
text-decoration: none;
position: relative;
}
s:after {
content: '';
display: block;
width: 100%;
height: 50%;
position: absolute;
top: 0;
left: 0;
border-bottom: 3px solid;
}
The border inherits text-color and you gain full control over your styling, including hover effects.
JS Fiddle here
I've wanted to do this before and came up with this:
<span class="strike">
<span class="through"></span>
Strikethrough
</span>
and:
.strike {
position:relative;
color:red;
}
.strike .through {
position:absolute;
left:0;
width:100%;
height:1px;
background: red;
/* position of strike through */
top:50%;
}
JS Fiddle here
and if you want multiple strike throughs you can use something like this:
JS Fiddle - multi strikes
This is my alternative version.
s {
color: red;
position: relative;
text-decoration: none;
}
s:after {
position: absolute;
left: 0;
right: 0;
top: -10px;
content: " ";
background: red;
height: 1px;
}
JSFiddle demo
Try this
s {
color: red;
text-decoration: none;
background-image: linear-gradient(transparent 7px,#cc1f1f 7px,#cc1f1f 12px,transparent 9px);
height: 100px
}
This question already has answers here:
How to customize <input type="file">?
(18 answers)
Closed 6 years ago.
I'm trying to style a file upload button to my personal preferences, but I couldn't find any really solid ways to do this without JS. I did find two other questions about this subject, but the answers there either involved JavaScript, or suggested Quirksmode's approach.
My major issue with this Quirksmode's approach is that the file button will still have the browser-defined dimensions, so it won't automatically adjust to whatever's used as button that's placed below it. I've made some code, based on it, but it will just take up the space the file button would normally take up, so it won't at all fill the parent div like I want it to.
HTML:
<div class="myLabel">
<input type="file"/>
<span>My Label</span>
</div>
CSS:
.myLabel {
position: relative;
}
.myLabel input {
position: absolute;
z-index: 2;
opacity: 0;
width: 100%;
height: 100%;
}
This fiddle demonstrates how this approach is quite flawed. In Chrome, clicking the !! below the second demo button will open the file dialog anyway, but also in all other browsers, the file button doesn't take up the correct areas of the button.
Is there any more solid way to style the file upload button, without any JavaScript, and preferably using as little 'hacky' coding as possible (since hacking usually brings other problems along with it, such as the ones in the fiddle)?
I'm posting this because (to my surprise) there was no other place I could find that recommended this.
There's a really easy way to do this, without restricting you to browser-defined input dimensions. Just use the <label> tag around a hidden file upload button. This allows for even more freedom in styling than the styling allowed via webkit's built-in styling[1].
The label tag was made for the exact purpose of directing any click events on it to the child inputs[2], so using that, you won't require any JavaScript to direct the click event to the input button for you anymore. You'd to use something like the following:
label.myLabel input[type="file"] {
position:absolute;
top: -1000px;
}
/***** Example custom styling *****/
.myLabel {
border: 2px solid #AAA;
border-radius: 4px;
padding: 2px 5px;
margin: 2px;
background: #DDD;
display: inline-block;
}
.myLabel:hover {
background: #CCC;
}
.myLabel:active {
background: #CCF;
}
.myLabel :invalid + span {
color: #A44;
}
.myLabel :valid + span {
color: #4A4;
}
<label class="myLabel">
<input type="file" required/>
<span>My Label</span>
</label>
I've used a fixed position to hide the input, to make it work even in ancient versions of Internet Explorer (emulated IE8- refused to work on a visibility:hidden or display:none file-input). I've tested in emulated IE7 and up, and it worked perfectly.
You can't use <button>s inside <label> tags unfortunately, so you'll have to define the styles for the buttons yourself. To me, this is the only downside to this approach.
If the for attribute is defined, its value is used to trigger the input with the same id as the for attribute on the <label>.
Please find below a way that works on all browsers. Basically I put the input on top the image.
I make it huge using font-size so the user is always clicking the upload button.
.myFile {
position: relative;
overflow: hidden;
float: left;
clear: left;
}
.myFile input[type="file"] {
display: block;
position: absolute;
top: 0;
right: 0;
opacity: 0;
font-size: 100px;
filter: alpha(opacity=0);
cursor: pointer;
}
<label class="myFile">
<img src="http://wscont1.apps.microsoft.com/winstore/1x/c37a9d99-6698-4339-acf3-c01daa75fb65/Icon.13385.png" alt="" />
<input type="file" />
</label>
The best example is this one, No hiding, No jQuery, It's completely pure CSS
http://css-tricks.com/snippets/css/custom-file-input-styling-webkitblink/
.custom-file-input::-webkit-file-upload-button {
visibility: hidden;
}
.custom-file-input::before {
content: 'Select some files';
display: inline-block;
background: -webkit-linear-gradient(top, #f9f9f9, #e3e3e3);
border: 1px solid #999;
border-radius: 3px;
padding: 5px 8px;
outline: none;
white-space: nowrap;
-webkit-user-select: none;
cursor: pointer;
text-shadow: 1px 1px #fff;
font-weight: 700;
font-size: 10pt;
}
.custom-file-input:hover::before {
border-color: black;
}
.custom-file-input:active::before {
background: -webkit-linear-gradient(top, #e3e3e3, #f9f9f9);
}
<input type="file" class="custom-file-input">
This seems to take care of business pretty well. A fidde is here:
HTML
<label for="upload-file">A proper input label</label>
<div class="upload-button">
<div class="upload-cover">
Upload text or whatevers
</div>
<!-- this is later in the source so it'll be "on top" -->
<input name="upload-file" type="file" />
</div> <!-- .upload-button -->
CSS
/* first things first - get your box-model straight*/
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
label {
/* just positioning */
float: left;
margin-bottom: .5em;
}
.upload-button {
/* key */
position: relative;
overflow: hidden;
/* just positioning */
float: left;
clear: left;
}
.upload-cover {
/* basically just style this however you want - the overlaying file upload should spread out and fill whatever you turn this into */
background-color: gray;
text-align: center;
padding: .5em 1em;
border-radius: 2em;
border: 5px solid rgba(0,0,0,.1);
cursor: pointer;
}
.upload-button input[type="file"] {
display: block;
position: absolute;
top: 0; left: 0;
margin-left: -75px; /* gets that button with no-pointer-cursor off to the left and out of the way */
width: 200%; /* over compensates for the above - I would use calc or sass math if not here*/
height: 100%;
opacity: .2; /* left this here so you could see. Make it 0 */
cursor: pointer;
border: 1px solid red;
}
.upload-button:hover .upload-cover {
background-color: #f06;
}
Any easy way to cover ALL file inputs is to just style your input[type=button] and drop this in globally to turn file inputs into buttons:
$(document).ready(function() {
$("input[type=file]").each(function () {
var thisInput$ = $(this);
var newElement = $("<input type='button' value='Choose File' />");
newElement.click(function() {
thisInput$.click();
});
thisInput$.after(newElement);
thisInput$.hide();
});
});
Here's some sample button CSS that I got from http://cssdeck.com/labs/beautiful-flat-buttons:
input[type=button] {
position: relative;
vertical-align: top;
width: 100%;
height: 60px;
padding: 0;
font-size: 22px;
color:white;
text-align: center;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
background: #454545;
border: 0;
border-bottom: 2px solid #2f2e2e;
cursor: pointer;
-webkit-box-shadow: inset 0 -2px #2f2e2e;
box-shadow: inset 0 -2px #2f2e2e;
}
input[type=button]:active {
top: 1px;
outline: none;
-webkit-box-shadow: none;
box-shadow: none;
}
I just came across this problem and have written a solution for those of you who are using Angular. You can write a custom directive composed of a container, a button, and an input element with type file. With CSS you then place the input over the custom button but with opacity 0. You set the containers height and width to exactly the offset width and height of the button and the input's height and width to 100% of the container.
the directive
angular.module('myCoolApp')
.directive('fileButton', function () {
return {
templateUrl: 'components/directives/fileButton/fileButton.html',
restrict: 'E',
link: function (scope, element, attributes) {
var container = angular.element('.file-upload-container');
var button = angular.element('.file-upload-button');
container.css({
position: 'relative',
overflow: 'hidden',
width: button.offsetWidth,
height: button.offsetHeight
})
}
};
});
a jade template if you are using jade
div(class="file-upload-container")
button(class="file-upload-button") +
input#file-upload(class="file-upload-input", type='file', onchange="doSomethingWhenFileIsSelected()")
the same template in html if you are using html
<div class="file-upload-container">
<button class="file-upload-button"></button>
<input class="file-upload-input" id="file-upload" type="file" onchange="doSomethingWhenFileIsSelected()" />
</div>
the css
.file-upload-button {
margin-top: 40px;
padding: 30px;
border: 1px solid black;
height: 100px;
width: 100px;
background: transparent;
font-size: 66px;
padding-top: 0px;
border-radius: 5px;
border: 2px solid rgb(255, 228, 0);
color: rgb(255, 228, 0);
}
.file-upload-input {
position: absolute;
top: 0;
left: 0;
z-index: 2;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
}
It's also easy to style the label if you are working with Bootstrap and LESS:
label {
.btn();
.btn-primary();
> input[type="file"] {
display: none;
}
}
i have CSS code that does not really work on webkit browsers such as safari and chrome
if you want live example here it is http://jsfiddle.net/mnjKX/1/
i have this CSS code
.file-wrapper {
cursor: pointer;
display: inline-block;
overflow: hidden;
position: relative;
}
.file-wrapper input {
cursor: pointer;
font-size: 100px;
height: 100%;
filter: alpha(opacity=1);
-moz-opacity: 0.01;
opacity: 0.01;
position: absolute;
right: 0;
top: 0;
}
.file-wrapper .button {
background: #79130e;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
color: #fff;
cursor: pointer;
display: inline-block;
font-size: 11px;
font-weight: bold;
margin-right: 5px;
padding: 4px 18px;
text-transform: uppercase;
}
and this HTML code :
<span class="file-wrapper">
<input type="file" name="photo" id="photo" />
<span class="button">Choose a Photo</span>
</span>
this code shows hidden input file tag ,
the problem here is that the cursor:pointer is does not work on webkit browsers ,
how can i solve it or bypass / overtake this ?
For starters, it works in Chrome if you remove the height declaration from the input rule.
Live demo: http://jsfiddle.net/mnjKX/16/
But this transparent input field is a hell of a hack... I wouldn't rely on it.
Update:
And here is the proper solution:
::-webkit-file-upload-button { cursor:pointer; }
I thought the file upload button is unreachable, but Chrome's user agent style sheet proved my wrong :)
An interesting (cross-browser) solution I came up with:
Give the input a CSS property of cursor:pointer, place the input in a div (with overflow:hidden) and give the input a left padding of 100%. The padded area will have the pointer property.
I personally don't trust -webkit and -moz fixes because I feel like they are arbitrary and temporary, and will be replaced soon.
input[type='file']{
opacity: 0;
cursor: pointer;
width: 24px;
height: 24px;
font-size: 0;
position: absolute;
}
<input type="file">
<img width="24" height="24" title="" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAADs0lEQVR42rWVa2iOYRjH9+zd+dw2oWaGwkjzRY5flDC1nBaxsTnVYkaWc8oHoZalETWHsVGkZo0yIyEmGzkWpZhDbBhmxE7v63fp/0j7YGq89e/+XfdzuJ7/dV/3/Tp+//nndHdD2o4RIQHBnilgIPL3+XytjuO0MkZ4O3zllevve3uUYMaulDxeePL0mruNXeaTmJ/IfMlfJZhekBLv+PuNBEPRq8427wN/jxPmeJxM4seoAH0yF+g9WonmVOTfK+o2weTNyZ6w2KC9fNFuQtz7AuF0+DV8Ft4GZ6OvxPXE7xlLGZ8wF4CLK39MMLNwZDoPJPPAHcJwOAiOhp/Ct+Ba3d9J/I3YEjUzTmNuNuwHd8DtcAg8FK4ica2jeuYyFKM4cyB1aGEz0BoUYw6QLWoEakLLUY25UOl+foSubaB8O1wHmWS+R+YadUojbEmi4WjYo4Rv5SCWMdic2LzYEjfBAXAynImDI78nqOXCWcIk2KsHgmB/+ARs6/BE8UDGuYw5KmkbfA5O1QckwfNJUOqWaCnDdVRuL5WsXO1oobrIXpYgJ9W6N9VKgdZRjmreUwqPReYgg7mjroMlZL5K5v2E8XA/2JKshc9okfui78QNxLaYdxgteQkcCVfCW+HX8LiuDqwFr6Ey1B/1Rm/QMJSP8lCkus4cNNheQbt032G5s4+qR8PRIhwccB1kk/kmmSsIB8GdcDVfkEbyU/B45ntZt3Ctg9icfGQ8zdwW+AY8WG36UA7m8XyZm2CxbrqkElmC2/AE+DKcCMeaC/W8nUUtWthVcJ0WtlXNMhmeS4LjXbvoolmF22ErwSh4BTzTuguFaRPadm9iXG0NAFfA1hQvtEaT4CwSHHLXYBHDLWQJ4lXnp2ifuuUYStRC2zPB6LwdYagQzdImeydNtaOFNTjoOsiSTXuot3q9BW6Bc+E62Hb7EOJQ4irGYsY5zO2E4+FmrYE5GA0vsJPWTbBMtbZWG6AyeJXgkxbTDsKXWoPBKp3tn2DY0c5vhp/BY7TIv9p0idrUNlAfnS3uUW6J3uqsaZM8OnPsQAyRfLr3g1rd2rTYdZAjB0WyGadzphHuBQfqhd+I39jX6p5OObCjIspaWQ7NQQ4OitwEm7hQRMYvfv/gx/vM2UIS7HFLtFG7tUUd1C67Udqdn63HVYpoufmuebtuR/kXlS9cu3w7H3zBTWB/laOxlqDNlABbu37VUWw9bn+lIdrBnxljbMPpno/6w7Hj/B383E4GEjzq9k+/p78fan0xNyGwEGgAAAAASUVORK5CYII=" />
cursor:pointer does not work on input file just because of the default button. No special reason here. You need to remove its appearance via this code, pay attention with font-size:0.
It works perfectly on Chrome, Firefox and IE for me. I hope, this will also help you.