I'm trying to build a checkbox without a label tag with CSS.
input[type='checkbox']:after{
line-height: 1.5em;
content: '';
display: inline-block;
width: 18px;
height: 18px;
margin-top: -4px;
margin-left: -4px;
border: 1px solid rgb(192,192,192);
border-radius: 0.25em;
background: #fff;
}
input[type='checkbox']:checked:after {
width: 15px;
height: 15px;
border: 2px solid black;
}
Tick is not appearing after clicking the checkbox. What is the missing thing here?
Fiddle
For check inside checkbox you can put content: '✔'; inside input[type='checkbox']:checked:after
Here is simple solution
input[type='checkbox']:after {
line-height: 1.5em;
content: '';
display: inline-block;
width: 18px;
height: 18px;
border: 1px solid rgb(192,192,192);
border-radius: 0.25em;
background: #fff;
margin-top: -4px;
margin-left: -4px;
}
input[type='checkbox']:checked:after {
content: '✔';
text-align: center;
width: 15px;
height: 15px;
border: 2px solid black;
}
<input type="checkbox"/>
here my jsfiddle you can checkout Here
Different Way
for that you need to add Fontawesome CDN to use icon to your project
https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css
after that just add in ur css under input[type='checkbox']:checked:after{}
input[type='checkbox']:checked:after {
/* content: '✔'; */
content: '\f00c';
text-align: center;
width: 15px;
height: 15px;
border: 2px solid black;
font-family: 'FontAwesome';
}
also you can find here fontawesome Cheatsheet for Code
input[type='checkbox']:after {
line-height: 1.5em;
content: '';
display: inline-block;
width: 18px;
height: 18px;
border: 1px solid rgb(192,192,192);
border-radius: 0.25em;
background: #fff;
margin-top: -4px;
margin-left: -4px;
}
input[type='checkbox']:checked:after {
/* content: '✔'; */
content: '\f00c';
text-align: center;
width: 15px;
height: 15px;
border: 2px solid black;
font-family: 'FontAwesome';
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<input type="checkbox"/>
checkout fiddle Here
Try this code, with html entity for a tick symbol
input[type='checkbox']:checked:after {
width: 15px;
height: 15px;
border: 2px solid black;
content: '\2713';
font-size: 22px;
line-height: 15px;
}
Related
I'm trying to add the triangle pointer directly in the middle of the anchor element. I tried using the transform property but its not working for the x coordinate:
.navigation-bar > a {
float:right;
display: inline-block;
vertical-align: top;
margin-right: 15px;
height: 60px;
color: white;
line-height: 70px;
font-weight: bolder;
font-size: 12px;
text-decoration: none;
font-family: sans-serif;
position: relative;
padding: 3px;
}
.navigation-bar > a:hover:before {
content: "";
position: absolute;
transform: translateX(350px);
transform: translateY(40px);
width: 0px;
height: 7px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid #fff;
}
You can do this like that way....
.navigation-bar>a {
display: inline-block;
vertical-align: top;
margin-right: 15px;
height: 60px;
color: #000;
line-height: 70px;
font-weight: bolder;
font-size: 12px;
text-decoration: none;
font-family: sans-serif;
position: relative;
padding: 3px;
background: red;
}
.navigation-bar>a:before {
content: "";
position: absolute;
transform: translateY(-10px);
width: 0;
height: 0;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 7px solid red;
}
<div class="navigation-bar">
html
</div>
I have been trying for a while now and cant seem to achive the bellow design:
.exploreItem {
background-color: #353258;
/* rgba(31, 31, 31, 1) */
border: 1px solid #4152F1;
color: white;
/* padding: 20px 24px; */
cursor: pointer;
width: 90%;
height: 45px;
/* font-size: 15px;
font: Arial;
font-family: sans-serif;
display: block; */
}
.exploreImg {
/* background-color: lightblue; */
display: inline-block;
vertical-align: top;
height: 30px;
/* width: 10px; */
padding-left: 10px;
}
.exploreLabel {
/* vertical-align: middle; */
/* background-color: grey; */
display: inline-block;
font-size: 15px;
font: Arial;
font-family: sans-serif;
/* width: 10px; */
margin-top: 0px;
}
<div class="exploreItem" id="exploreItem">
<img class="exploreImg" src="images/defaultProfImg.png">
<label class="exploreLabel">Explore</label>
</div>
How can I create the intended design layout? (An image next to the explore label like in the image)
You even don't need the image just use css to do it. And even if you use image you can use display: flex for .exploreItem and align-items: center can do the magic.
I had put down the simpler css only solution here with :before pseudo element.
.exploreItem {
background-color: #353258;
border: 1px solid #4152F1;
color: white;
cursor: pointer;
padding: 16px;
width: 90%;
border-radius: 32px;
}
.exploreLabel {
display: flex;
align-items: center;
font-size: 15px;
font: Arial;
font-family: sans-serif;
margin-top: 0px;
}
.exploreLabel:before {
content: '';
height: 28px;
width:28px;
background-color: #4152F1;
border: 1px solid #a89dff;
display: block;
margin-right: 16px;
border-radius: 50%;
}
<div class="exploreItem" id="exploreItem">
<label class="exploreLabel">Explore</label>
</div>
.wrapper {
width: 200px;
}
.exploreItem {
width: 100%;
display: flex;
background: transparent;
padding: 20px 30px;
border: 1px solid transparent;
border-radius: 50px;
align-items: center;
cursor: pointer;
}
.exploreItem label {
color: #919191;
}
.exploreItem.active {
display: flex;
background: #2F2D50;
border: 1px solid #483EF1;
}
.exploreItem.active label {
color: #ffffff;
}
.exploreItem i {
display: block;
background: #A3A3A3;
border: 1px solid transparent;
width: 25px;
height: 25px;
border-radius: 50px;
margin-right: 10px;
}
.exploreItem.active i {
background: #483EF1;
border: 1px solid #A5A0FF;
}
<div class="wrapper">
<div class="exploreItem active">
<i></i>
<label class="exploreLabel">Explore</label>
</div>
<div class="exploreItem">
<i></i>
<label class="exploreLabel">Explore</label>
</div>
</div>
Use below code:
HTML:
<div class="outer">
<div class="round"></div>
<label>
<span>Explore</span>
</label>
</div>
CSS:
.outer
{
background: #353258;
border: 1.5px solid #4152F1;
color: white;
padding: 7px 8px;
cursor: pointer;
width: 150px;
height:33px;
border-radius: 30px;
cursor: pointer;
}
.round
{
background: #502ffb;
height: 28px;
width: 28px;
display: inline-block;
border: 1px solid white;
border-radius: 50%;
}
label
{
color: white;
display: inline-block;
cursor: pointer;
}
label span
{
position: absolute;
margin-top: -24px;
margin-left: 3px;
font-size: 17px;
}
This question already has answers here:
How do I center an anchor element in CSS?
(14 answers)
Closed 5 years ago.
For some reason, this <a> tag won't align to the horizontal center. What needs to be done in order to fix this?
.button {
display: inline-block;
position: relative;
padding: 10px 60px;
background-color: transparent;
border: 3px solid black;
color: black;
text-decoration: none!important;
text-align: center;
text-indent: 15px;
}
.button:before, .button:after {
content: ' ';
display: block;
position: absolute;
left: 10px;
top: 52%;
}
/* box shape */
.button:before {
width: 20px;
height: 4px;
border-style: solid;
border-width: 0 4px 4px;
}
demo
Wrap it in a DIV tag that has text-align: center;:
.button {
display: inline-block;
position: relative;
padding: 10px 60px;
background-color: transparent;
border: 3px solid black;
color: black;
text-decoration: none!important;
text-align: center;
text-indent: 15px;
}
.button:before,
.button:after {
content: ' ';
display: block;
position: absolute;
left: 10px;
top: 52%;
}
/* box shape */
.button:before {
width: 20px;
height: 4px;
border-style: solid;
border-width: 0 4px 4px;
}
.x {
text-align: center;
}
<div class="x">demo</div>
Used margin: 0 auto; for centering and changed a tag to display: block; Also added a width to it.
.button {
display: inline-block;
position: relative;
padding: 10px 60px;
background-color: transparent;
border: 3px solid black;
color: black;
text-decoration: none!important;
text-align: center;
text-indent: 15px;
width: 50px;
display: block;
margin: 0 auto;
}
.button:before,
.button:after {
content: ' ';
display: block;
position: absolute;
left: 10px;
top: 52%;
}
/* box shape */
.button:before {
width: 20px;
height: 4px;
border-style: solid;
border-width: 0 4px 4px;
}
demo
You have to make a tag a block element.So rather than inline-block use display:block.And to center use margin:0 auto;
.button {
display: block;
position: relative;
padding: 10px 60px;
background-color: transparent;
border: 3px solid black;
color: black;
text-decoration: none!important;
text-align: center;
text-indent: 15px;
}
.myButton {
width: 150px;
margin: 10px auto;
}
.button:before,
.button:after {
content: ' ';
display: block;
position: absolute;
left: 10px;
top: 52%;
}
/* box shape */
.button:before {
width: 20px;
height: 4px;
border-style: solid;
border-width: 0 4px 4px;
}
demo
demo
The "a"-Element is contained in another Element. In the case of your example it is in the Body-Element. This Element need to have its elements centered, so you would need to set a rule like this:
body {
text-align: center;
}
.button {
display: inline-block;
position: relative;
padding: 10px 60px;
background-color: transparent;
border: 3px solid black;
color: black;
text-decoration: none!important;
text-indent: 15px;
}
.button:before,
.button:after {
content: ' ';
display: block;
position: absolute;
left: 10px;
top: 52%;
text-align: center;
}
/* box shape */
.button:before {
width: 20px;
height: 4px;
border-style: solid;
border-width: 0 4px 4px;
}
body {
text-align: center;
}
demo
.button {
display: inline-block;
position: absolute;
padding: 10px 60px;
background-color: transparent;
border: 3px solid black;
color: black;
text-decoration: none!important;
text-align: center;
text-indent: 15px;
left: calc(50% - 88px);
}
.button:before, .button:after {
content: ' ';
display: block;
position: absolute;
left: 10px;
top: 52%;
}
/* box shape */
.button:before {
width: 20px;
height: 4px;
border-style: solid;
border-width: 0 4px 4px;
}
demo
Just change yours .button class CSS to this one:
.button {
display: inline-block;
position: absolute;
width: 20px;
padding: 10px 60px;
background-color: transparent;
border: 3px solid black;
color: black;
text-decoration: none!important;
text-align: center;
text-indent: 15px;
left: 0;
right: 0;
margin: 0 auto;
}
It will surely work. Thanks.
Use transform to do the trick.
.button {
left: 50%;
transform: translateX(-50%);
}
.button {
left: 50%;
transform: translateX(-50%);
display: inline-block;
position: relative;
padding: 10px 60px;
background-color: transparent;
border: 3px solid black;
color: black;
text-decoration: none !important;
text-align: center;
text-indent: 15px;
}
.button:before, .button:after {
content: ' ';
display: block;
position: absolute;
left: 10px;
top: 52%;
}
/* box shape */
.button:before {
width: 20px;
height: 4px;
border-style: solid;
border-width: 0 4px 4px;
}
demo
I'm trying to create a button that looks like this:
The tricky part is getting the number to 'fit' inside of the button. This is how I have my button set up:
<button type="text" class="textclass"><span class="numberclass">33</span>Text</button>
This is my CSS:
.textclass {
width: 90px;
height: 30px;
background-color: #FFF;
border: 1px solid blue;
color: blue;
font-size: 10px;
line-height: 12px;
font-weight: 600;
text-transform: uppercase;
border-radius: 2px;
padding-left: 20px;
}
.numberclass {
background-color: blue;
color: #FFF;
position: absolute;
left: 0;
top: 0;
height:30px;
width: 30px;
border-radius: 2px 0 0 2px;
}
Setting the height and width of the number seems unnecessary, and I can't get the number to line up properly unless I get into extremely specific positioning which is not ideal. Where am I going wrong here?
Plunk:
http://plnkr.co/edit/0WUs3Y2axmOvfB7TswCb?p=preview
Try to this Define your .textclass position:relative;overflow:hidden; and .numberclass line-height:30px; as like this
/* Styles go here */
.textclass {
width: 90px;
position:relative;
overflow:hidden;
height: 30px;
background-color: #FFF;
border: 1px solid blue;
color: blue;
font-size: 10px;
line-height: 12px;
font-weight: 600;
text-transform: uppercase;
border-radius: 2px;
padding-left: 20px;
}
.numberclass {
background-color: blue;
color: #FFF;
position: absolute;
left: 0;
top: 0;
height:30px;
width: 30px;
line-height:30px;
border-radius: 2px 0 0 2px;
}
<div>
<button type="text" class="textclass"><span class="numberclass">33</span>Text</button>
</div>
or you just define button into span tag as like this
.textclass {
width: 90px;
position:relative;
overflow:hidden;
display:inline-block;vertical-align:top;text-align:center;
height: 30px;
background-color: #FFF;
border: 1px solid blue;
color: blue;
font-size: 10px;
line-height: 30px;
font-weight: 600;
text-transform: uppercase;
border-radius: 2px;
padding-left: 20px;
}
.numberclass {
background-color: blue;
color: #FFF;
position: absolute;
left: 0;
top: 0;
height:30px;
width: 30px;
line-height:30px;
border-radius: 2px 0 0 2px;
}
<div>
<span class="textclass"><span class="numberclass">33</span>Text</span></div>
Just give position: relative; to .textclass and line-height: 30px; to .numberclass
Updated Plunker
try this (replace it)
.numberclass {
background-color: blue;
color: #FFF;
position: absolute;
left: 9px;
top: 8px;
height: 20px;
padding-top: 9px;
width: 30px;
border-radius: 2px 0 0 2px;
}
you can try this one:
.textclass {
width: 140px;
position:relative;
overflow:hidden;
height: 40px;
background-color: #FFF;
border: 1px solid blue;
color: blue;
font-size: 15px;
line-height: 12px;
font-weight: 600;
text-transform: uppercase;
border-radius: 2px;
padding-left: 30px;
}
.numberclass {
background-color: blue;
color: #FFF;
position: absolute;
left: 0;
top: 0;
height:40px;
width: 40px;
line-height:35px;
border-radius: 2px 0 0 2px;
}
DEMO HERE
Please, see the working plunker with completely auto adjusting height of the number part. You do not even need to apply the line-height.
HTML
<button type="text" class="textclass">
<span class="numberclass">
<span class="container"><span class="inner">33</span></span>
</span>
Text
</button>
CSS
.textclass {
width: 90px;
height: 30px;
position: relative;
background-color: #FFF;
border: 1px solid blue;
color: blue;
font-size: 10px;
line-height: 12px;
font-weight: 600;
text-transform: uppercase;
border-radius: 2px;
padding-left: 20px;
}
.numberclass {
background-color: blue;
color: #FFF;
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 30px;
border-radius: 2px 0 0 2px;
display: block;
}
.container {
display: table;
height: 100%;
text-align: center;
width: 100%;
}
.inner {
display: table-cell;
height: 100%;
vertical-align: middle;
}
change in .numberclass class
/* Styles go here */
.textclass {
width: 90px;
height: 30px;
background-color: #FFF;
border: 1px solid blue;
color: blue;
font-size: 10px;
line-height: 12px;
font-weight: 600;
text-transform: uppercase;
border-radius: 2px;
padding-left: 20px;
}
.numberclass {
background-color: blue;
border-radius: 1px 0 0 1px;
color: #fff;
left: 8px;
padding: 8px;
position: absolute;
top: 9px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div>
<button type="text" class="textclass"><span class="numberclass">33</span>Text</button>
</div>
</body>
</html>
I am using custom CSS to style radio boxes but now the problem is that
checked radio circle is appearing at diff positions in IE11, FF36 and Chrome. Below is the illustration
CSS used to achieve this is as below:
label {
display: inline-block;
cursor: pointer;
position: relative;
padding-left: 32px;
}
input[type=radio] {
display: none;
}
label:before {
content: "";
display: inline-block;
width: 23px;
height: 22px;
margin-right: 10px;
position: absolute;
left: 0;
border:1px solid $grey;
border-radius: 50px;
}
input[type=radio]:checked + label:before {
content: "\25CF";
border:1px solid $light-blue;
color: $light-blue;
font-size: 26px;
text-align: center;
line-height: 0rem;
padding-top: 7px;
}
Any ideas please to work it same in all browsers..
I changed the approach. Instead of using content and line height, i switched as below
label:before {
content: "";
display: inline-block;
width: 20px;
height: 20px;
margin-right: 10px;
position: absolute;
padding:1px;
left: 0;
border:1px solid black;
border-radius: 50px;
}
input[type=radio]:checked + label:before {
border:1px solid blue;
background-color:blue;
box-shadow: 0 0 0 3px #fff inset;
width: 20px;
height: 20px;
}
JS Fiddle