I am trying to come up with a pure-css fancy checkbox. And I have succeeded to achieve my goal by 90%, with the only exception that I see the irritating standard chechbox appear from under my fancy checkbox. And I can't get rid of it. Any help ?
.checkboxFive {
width: 12px;
margin: 12px 100px;
position: relative;
}
.checkboxFive label {
cursor: pointer;
position: absolute;
width: 12px;
height: 12px;
top: 0;
left: 0;
background: #eee;
border: 1px solid #ddd;
}
.checkboxFive label:after {
opacity: 0;
content: '';
position: absolute;
width: 11px;
height: 4px;
background: transparent;
top: 1px;
left: 3px;
border: 2px solid #333;
border-top: none;
border-right: none;
transform: rotate(-45deg);
}
.checkboxFive label:hover::after {
opacity: 0.5;
}
.checkboxFive input[type=checkbox]:checked + label:after {
opacity: 1;
}
<div class="checkboxFive">
<input type="checkbox" value="1" id="checkboxFiveInput" name="" />
<label for="checkboxFiveInput"></label>
</div>
you can remove it from screen with position and coordonates.
(display or visibility might become an accessibility issue)
.checkboxFive {
width: 12px;
margin: 12px 100px;
position: relative;
}
.checkboxFive label {
cursor: pointer;
position: absolute;
width: 12px;
height: 12px;
top: 0;
left: 0;
background: #eee;
border: 1px solid #ddd;
}
.checkboxFive label:after {
opacity: 0;
content: '';
position: absolute;
width: 11px;
height: 4px;
background: transparent;
top: 1px;
left: 3px;
border: 2px solid #333;
border-top: none;
border-right: none;
transform: rotate(-45deg);
}
.checkboxFive label:hover::after {
opacity: 0.5;
}
#checkboxFiveInput {
position:absolute;
left:-9999px;
}
.checkboxFive input[type=checkbox]:checked + label:after {
opacity: 1;
}
<div class="checkboxFive">
<input type="checkbox" value="1" id="checkboxFiveInput" name="" />
<label for="checkboxFiveInput"></label>
</div>
Add a display:none to checkboxFiveInput.
.checkboxFive {
width: 12px;
margin: 12px 100px;
position: relative;
}
.checkboxFive input {
display:none;
}
.checkboxFive label {
cursor: pointer;
position: absolute;
width: 12px;
height: 12px;
top: 0;
left: 0;
background: #eee;
border: 1px solid #ddd;
}
.checkboxFive label:after {
opacity: 0;
content: '';
position: absolute;
width: 11px;
height: 4px;
background: transparent;
top: 1px;
left: 3px;
border: 2px solid #333;
border-top: none;
border-right: none;
transform: rotate(-45deg);
}
.checkboxFive label:hover::after {
opacity: 0.5;
}
.checkboxFive input[type=checkbox]:checked + label:after {
opacity: 1;
}
<div class="checkboxFive">
<input type="checkbox" value="1" id="checkboxFiveInput" name="" />
<label for="checkboxFiveInput"></label>
</div>
The first step in creating a custom checkbox is to add visibility: hidden to your input element. In your case, your css would look like this:
.checkboxFive #checkboxFiveInput {
visibility: hidden;
}
You can see this link for more information about building custom checkboxes.
Related
hay guys i want to ask about input:focus on css. i have an input with effect, when i want to fill the input the label will transition to top. When i was using google chrome the input:focus work very well, but when i use mozilla nothing change in my input. Are you have solution guys?
<div class="form-input">
<input type="text" id="fullname" class="form-textbox-ep" name="name" value="{name}" required>
<label for="fullname" class="form-label-ep">Nama Perusahaan</label>
</div>
.form-textbox-ep
{
border: none;
border-bottom: 1px solid #E2E2E2;
font-weight: 400;
height: 74px;
width: 100%;
font-size: 18px;
color: #3B61AA !important;
position: relative;
line-height: 15px;
}
.form-textbox-ep:focus ~ .form-label,.form-textbox-ep:valid ~ .form-label-ep,.form-textbox-ep:read-only ~ .form-label-ep {
top: 18px;
left: 0;
font-size: 13px;
cursor: pointer;
}
.form-textbox-ep:focus,.form-textbox-ep:valid, .form-textbox-ep:read-only{
padding-top: 25px;
}
.form-label-ep{
position: absolute;
top: 28px;
left: 0;
color: #000;
cursor: text;
transition: all .15s ease-in-out 0s;
font-size: 15px;
line-height: 15px;
}
Your code is quite busy so i rewrite that code with below will give you desire result.
.box {
width: 300px;
margin: 40px 3%;
position: relative;
}
:focus {
outline: none;
}
input[type="text"] {
font: 15px/24px "Lato", Arial, sans-serif;
color: #333;
width: 100%;
box-sizing: border-box;
letter-spacing: 1px;
}
.effect {
border: 0;
padding: 4px 0;
border-bottom: 1px solid #ccc;
background-color: transparent;
}
.effect~.focus-border {
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background-color: #3399ff;
transition: 0.4s;
}
.effect:focus~.focus-border,
.has-content.effect-16~.focus-border {
width: 100%;
transition: 0.4s;
}
.effect~label {
position: absolute;
left: 0;
width: 100%;
top: 9px;
color: #aaa;
transition: 0.3s;
z-index: -1;
letter-spacing: 0.5px;
}
.effect:focus~label,
.has-content.effect-16~label {
top: -16px;
font-size: 12px;
color: #3399ff;
transition: 0.3s;
}
<div class="box">
<div class="col-3 input-effect">
<input class="effect" type="text" placeholder="">
<label>First Name</label>
<span class="focus-border"></span>
</div>
</div>
This question already has answers here:
How to change checkbox's border style in CSS?
(15 answers)
Closed 6 years ago.
I have a check box in my table.
this is css of that checkbox
input[type="checkbox"] {
width: 20px;
height: 30px;
margin: auto;
display: table-row;
border: 5px solid red;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
margin-left: 4px;
margin-top: 1px;
}
but it shows normal checkbox.
I want to change the border color of that checkbox.
but it doesn't work!!!
You can put only below css for checkbox border and see Fiddle Demo
CSS:
.error input[type=checkbox] {
outline: 2px solid #c00;
}
Try this customized the checkbox code:
/* Remove default checkbox */
[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
position: absolute;
left: -9999px;
}
[type="checkbox"]:not(:checked) + label,
[type="checkbox"]:checked + label {
position: relative;
overflow: hidden;
padding-left: 35px;
cursor: pointer;
display: inline-block;
height: 25px;
line-height: 25px;
-webkit-user-select: none; /* webkit (safari, chrome) browsers */
-moz-user-select: none; /* mozilla browsers */
-khtml-user-select: none; /* webkit (konqueror) browsers */
-ms-user-select: none; /* IE10+ */
}
/* checkbox aspect */
[type="checkbox"] + label:before,
[type="checkbox"] + label:after {
content: '';
position: absolute;
left: 0;
z-index: 1;
-webkit-transition: .2s;
transition: .2s;
}
/* Unchecked styles */
[type="checkbox"]:not(:checked) + label:before {
top: 0px;
width: 19px; height: 19px;
border: 1px solid red;
}
[type="checkbox"]:not(:checked) + label:after {
top: 0px;
width: 19px; height: 19px;
border: 1px solid red;
z-index: 0;
}
/* Checked styles */
[type="checkbox"]:checked + label:before {
top: 2px;
width: 6px; height: 12px;
border-top: 1px solid transparent;
border-left: 1px solid transparent;
border-right: 1px solid red;
border-bottom: 1px solid red;
-webkit-transform: rotateZ(37deg);
transform: rotateZ(37deg);
-webkit-transform-origin: 20% 40%;
transform-origin: 100% 100%;
}
[type="checkbox"]:checked + label:after {
top: 0px;
width: 19px; height: 19px;
border: 1px solid red;
z-index: 0;
}
/* disabled checkbox */
[type="checkbox"]:disabled:not(:checked) + label:before,
[type="checkbox"]:disabled:checked + label:before {
top: 0;
box-shadow: none;
background-color: #444;
width: 19px; height: 19px;
border: 3px solid #444;
-webkit-transform: rotateZ(0deg);
transform: rotateZ(0deg);
}
[type="checkbox"]:disabled + label {
color: #555;
}
[type="checkbox"]:disabled:not(:checked) + label:hover:before {
border-color: red;
}
<form action="#">
<p>
<input type="checkbox" id="test1" />
<label for="test1">Red</label>
</p>
<p>
<input type="checkbox" id="test2" checked="checked" />
<label for="test2">Yellow</label>
</p>
</form>
I guess HTML does not allow adding border styles to check boxes. Try using the outline property instead.
I've been searching the Internet for a while and found nothing, so I'm turning to you guys.
I was wondering how you can do a button like this with CSS (On/Off button example):
I already tried something like this :
HTML :
<a class="button_tooltip" href="#">On</a>
<a class="button_tooltip" href="#">Off</a>
CSS:
a {
color: #76daff;
display: inline-block;
padding: 8px 16px;
position: relative;
text-decoration: none;
}
a {
color: #76daff;
}
a.button_tooltip {
background: #ccc none repeat scroll 0 0;
color: black;
}
a.button_tooltip::after {
border-top-color: #cccccc;
}
a.button_tooltip::after {
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid #ccc;
content: "";
margin-left: -8px;
}
a.button_tooltip {
background: #cccccc none repeat scroll 0 0;
color: #000000;
}
a.button_tooltip::after {
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid #ccc;
content: "";
}
a.button_tooltip::after {
border-top-color: #cccccc;
}
But only gave me the square without the little triangle underneath.
This is easily possible with 2 elements and using a pseudo element to get the arrow bit underneath to show.
It doesn't take a great deal of HTML/CSS to complete and can easily be changed to work as an input or as an <a> tag. Whatever your requirements are.
$(document).ready(function() {
$('.btn').click(function() {
$('.btn').toggleClass('active');
});
});
.container {
width: 200px;
height: 100px;
}
.btn {
width: 100px;
height: 100px;
box-sizing: border-box;
border: 1px solid blue;
float: left;
cursor: pointer;
}
.active {
background: blue;
position: relative;
}
.active:before {
content: '';
position: absolute;
width: 50px;
height: 50px;
transform: rotate(45deg);
bottom: -10px;
left: 25px;
background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="btn"></div>
<div class="btn active"></div>
</div>
$(document).ready(function() {
$('.toggle-btn button').click(function() {
$(this).parent('.toggle-btn').children('button').removeClass('active');
$(this).addClass('active');
});
});
.toggle-btn {
border: 1px solid #4c8cca;
display: inline-block;
line-height: 1;
width: 100px;
}
button {
line-height: 1;
float: left;
height: 30px;
background: none;
background-color: transparent;
border: none;
padding: 0;
position: relative;
outline: 0;
width: 50%;
cursor: pointer;
}
button:hover {
background-color: #EEE;
}
button.active {
background: #4c8cca;
background-color: #4c8cca;
color: #FFF;
}
button.active:after {
content: '';
position: absolute;
width: 10px;
height: 10px;
top: 25px;
transform: rotate(45deg);
background-color: #4c8cca;
left: 50%;
margin-left: -4px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="toggle-btn">
<button>Yes</button>
<button class="active">No</button>
</div>
Here you go:
http://jsfiddle.net/es_kaija/negzqemp/
<div class="switch off">
<div class="toggle"></div>
<span class="on">ON</span>
<span class="off">OFF</span>
</div>
<style>
.switch {
position: relative;
display: inline-block;
font-size: 1em;
font-weight: bold;
color: #ccc;
text-shadow: 0px 1px 1px rgba(255,255,255,0.8);
height: 18px;
padding: 6px 6px 5px 6px;
border: 1px solid #ccc;
border: 1px solid rgba(0,0,0,0.2);
border-radius: 4px;
background: #ececec;
box-shadow: 0px 0px 4px rgba(0,0,0,0.1), inset 0px 1px 3px 0px rgba(0,0,0,0.1);
cursor: pointer;
}
.switch span { display: inline-block; width: 35px; }
.switch span.On { color: #33d2da; }
.switch .toggle {
position: absolute;
top: 1px;
width: 37px;
height: 25px;
border: 1px solid #ccc;
border: 1px solid rgba(0,0,0,0.3);
border-radius: 4px;
background: #fff;
background: -moz-linear-gradient(top, #ececec 0%, #ffffff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ececec), color-stop(100%,#ffffff));
background: -webkit-linear-gradient(top, #ececec 0%,#ffffff 100%);
background: -o-linear-gradient(top, #ececec 0%,#ffffff 100%);
background: -ms-linear-gradient(top, #ececec 0%,#ffffff 100%);
background: linear-gradient(top, #ececec 0%,#ffffff 100%);
box-shadow: inset 0px 1px 0px 0px rgba(255,255,255,0.5);
z-index: 999;
-webkit-transition: all 0.15s ease-in-out;
-moz-transition: all 0.15s ease-in-out;
-o-transition: all 0.15s ease-in-out;
-ms-transition: all 0.15s ease-in-out;
}
.switch.on .toggle { left: 2%; }
.switch.off .toggle { left: 54%; }
</style>
<script>
$(document).ready(function() {
// Switch toggle
$('.switch').click(function() {
$(this).toggleClass('on').toggleClass('off');
});
});
</script>
You can do that using css itself. Here is the example - https://jsfiddle.net/p653bpbe/
html
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
<label class="onoffswitch-label" for="myonoffswitch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
css
.onoffswitch {
position: relative; width: 90px;
-webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch-checkbox {
display: none;
}
.onoffswitch-label {
display: block; overflow: hidden; cursor: pointer;
border: 1px solid #2E8DEF; border-radius: 0px;
}
.onoffswitch-inner {
display: block; width: 200%; margin-left: -100%;
transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
display: block; float: left; width: 50%; height: 30px; padding: 0; line-height: 26px;
font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
box-sizing: border-box;
border: 2px solid transparent;
background-clip: padding-box;
}
.onoffswitch-inner:before {
content: "";
padding-left: 10px;
background-color: #FFFFFF; color: #FFFFFF;
}
.onoffswitch-inner:after {
content: "";
padding-right: 10px;
background-color: #FFFFFF; color: #333333;
text-align: right;
}
.onoffswitch-switch {
display: block; width: 45px; margin: 0px;
background: #2E8DEF;
position: absolute; top: 0; bottom: 0;
transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
right: 0px;
}
Button
a { font-size: 0; line-height: 0; text-indent: -4000px; background: #fff; border: 1px solid #007bff; width: 30px; height: 30px; display: block; position: relative; }
a:after { position: absolute; top: -1px; left: 30px; width: 30px; height: 30px; content: ''; display: block; background: #007bff; border: 1px solid #007bff; }
a:before { content: ''; display: block; width: 0; height: 0; border-style: solid; border-width: 10px 10px 0 10px; border-color: #007bff transparent transparent transparent; position: absolute; bottom: -10px; right: -25px; }
I'm trying to make a box that the bottom right border has to be a diagonal line, like in the image below:
Has anyone an idea of how can I do it without using a background image?
Example 1 - link
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
padding: 20px 60px;
}
.btn,
.btn span{
width: 300px;
height: 100px;
display: inline-block;
position: relative;
color: #e74c3c;
font: bold 18px/100px'segoe ui';
text-transform: uppercase;
text-align: center;
text-decoration: none;
overflow: hidden;
padding: 2px;
}
.btn span {
width: 100%;
height: 100%;
}
.btn:before,
.btn span:before{
content:'';
position: absolute; right: -500%;
width: 1100%;
height: 1100%;
background: #c00;
z-index: -1;
}
.btn:hover span{
color: #000;
}
.btn:hover:before{
background: #000;
}
/* ----- btn-left-top ----- */
.btn-left-top:before,
.btn-left-top span:before{
top: 20px;
transform-origin: 46% top;
transform: rotate(-45deg);
}
.btn-left-top span:before{
top: 19px;
background: #fff;
}
/* ----- btn-left-bottom ----- */
.btn-left-bottom:before,
.btn-left-bottom span:before{
bottom: 20px;
transform-origin: 46% bottom;
transform: rotate(45deg);
}
.btn-left-bottom span:before{
bottom: 19px;
background: #fff;
}
/* ----- btn-right-top ----- */
.btn-right-top:before,
.btn-right-top span:before{
top: 20px;
transform-origin: 54% top;
transform: rotate(45deg);
}
.btn-right-top span:before{
top: 19px;
background: #fff;
}
/* ----- btn-right-bottom ----- */
.btn-right-bottom:before,
.btn-right-bottom span:before{
bottom: 20px;
transform-origin: 54% bottom;
transform: rotate(-45deg);
}
.btn-right-bottom span:before{
bottom: 19px;
background: #fff;
}
<a href="#" class="btn btn-left-top">
<span>btn-left-top</span>
</a>
<a href="#" class="btn btn-right-top">
<span>btn-right-top</span>
</a>
<a href="#" class="btn btn-right-bottom">
<span>btn-right-bottom</span>
</a>
<a href="#" class="btn btn-left-bottom">
<span>btn-left-bottom</span>
</a>
Example 2 - link
* {
margin: 0;
padding: 0;
}
body {
padding: 20px 60px;
}
.btn{
width: 300px;
height: 100px;
display: inline-block;
position: relative;
border: 4px solid #e74c3c;
color: #e74c3c;
font: bold 18px/100px 'segoe ui';
text-transform: uppercase;
text-align: center;
text-decoration: none;
}
.btn > span:before {
content: '';
position: absolute; bottom: 12px; right: 9px;
width: 66px;
height: 66px;
transform: rotate(45deg);
z-index: 1;
border-right: 4px solid #e74c3c;
}
.btn:before,
.btn:after{
content: '';
position: absolute; bottom: -4px; right: -4px;
}
.btn:before{
width: 47px;
height: 0;
border-bottom: 4px solid #fff;
}
.btn:after{
width: 0;
height: 47px;
border-right: 4px solid #fff;
}
.btn:hover{
border: 4px solid #4169E1;
color: #4169E1;
}
.btn:hover > span:before{
border-right: 4px solid #4169E1;
}
<a href="#" class="btn">
<span>test</span>
</a>
Fiddle
Check this out it may help you click
HTML
<div class="blockHead">
<span class="blocktext">
ABC Team
</span>
</div>
CSS
.blockHead:after {
color:#4D81BF;
border-left: 20px solid;
border-top: 20px solid;
border-bottom: 20px solid transparent;
display: inline-block;
content: '';
position: absolute;
right: -20px;
}
.blockHead {
background-color:#4D81BF;
/*width: 150px; */
height: 40px;
display: inline-block;
position: relative;
}
.blocktext{
color:white;
font-weight:bold;
padding:0px 40px 0px 10px;
font-family:Arial;
font-size:11;
line-height:2.5;
}
Is it possible to turn this:
into this?
Ie. placing the anchor's text above its absolutely positioned arrow pseudo element.
The only solution I can think of is wrapping the anchor text in a span and then absolutely positioning that again over everything. But is there a way to do this without modifying the markup?
http://jsfiddle.net/pgvx1h04/
.tryout {
margin-top: 50px;
}
.container {
position: absolute;
background: #fff;
border: 1px solid black;
}
.container a {
padding: 3px 11px;
position: relative;
}
.container a:before, .container a:after {
content: "";
position: absolute;
height: 20px;
width: 20px;
transform: rotate(45deg);
top: -8px;
left: 18px;
}
.container a:before {
background: black;
z-index: -1;
}
.container a:after {
background: white;
z-index: 1;
top: -7px;
}
<div class="tryout">
<div class="container">
<a>Hello world</a>
</div>
</div>
Maybe you can fake it with before and after like this:
.tryout {
margin-top: 50px;
}
.container {
position: absolute;
background: #fff;
border: 1px solid black;
}
.container a {
padding: 3px 11px;
position: relative;
}
.container a:before {
content:"";
width: 0;
height: 0;
border: 10px solid;
position: absolute;
border-top-color: transparent;
border-right-color: transparent;
border-left-color: transparent;
border-bottom-color: #000;
top: -19px;
left: 18px;
display: block;
}
.container a:after{
content:"";
width: 0;
height: 0;
border: 10px solid;
position: absolute;
border-top-color: transparent;
border-right-color: transparent;
border-left-color: transparent;
border-bottom-color: #fff;
top: -17px;
left: 18px;
display: block;
}
<div class="tryout">
<div class="container">
<a>Hello world</a>
</div>
</div>