Custom Checkbox without label [duplicate] - css

This question already has answers here:
What are the various ways to hide a <div>?
(5 answers)
Can I have an onclick effect in CSS?
(14 answers)
Closed 2 years ago.
I have an a element that acts like a toggle button :
var container = document.getElementsByClassName("favorite");
for (var i = 0; i < container.length; i++) {
//For each element in the container array, add an onclick event.
container[i].onclick = function(event) {
this.classList.toggle('selected');
}
}
body {
background-color: #04246A;
}
.container {
position: relative;
width: 204px;
max-width: 204px;
height: 82px;
max-height: 82px;
padding: 24px;
background: #fff;
display: flex;
flex-direction: column;
justify-content: space-between;
box-sizing: border-box;
color: black;
list-style: none;
border: 2px solid black;
}
.container .favorite {
position: absolute;
top: 10px;
right: 10px;
width: 40px;
height: 40px;
display: flex;
border-radius: 50%;
cursor: pointer;
}
.container .favorite:hover {
background: #D9DEEA;
}
.container .favorite::after {
z-index: 2;
position: relative;
margin: auto;
height: 20px;
content: url("https://img.icons8.com/ios/16/000000/star.png");
}
.container .favorite.selected::after {
content: url("https://img.icons8.com/ios-filled/16/000000/star.png");
}
.container dl {
margin: 0;
}
.container dl dt {
display: block;
font-size: 12px;
color: #6B7790;
}
.container dl dd {
margin: 0;
font-weight: normal;
color: #04246A;
}
<div class="container">
<a class="favorite"></a>
<dl>
<dt>Ref</dt>
<dd>XXX123</dd>
</dl>
</div>
I want to transform it to a checkbox, but the solutions I find are for a checkbox with a label, I only want to use the checkbox in my html without the label or some additional div, this is what I tried :
body {
background-color: #04246A;
}
.container {
position: relative;
width: 204px;
max-width: 204px;
height: 82px;
max-height: 82px;
padding: 24px;
background: #fff;
display: flex;
flex-direction: column;
justify-content: space-between;
box-sizing: border-box;
color: black;
list-style: none;
border: 2px solid black;
}
input[type="checkbox"]{
height: 20px;
width: 20px;
position: absolute;
opacity: 1;
margin: auto;
height: 20px;
cursor: pointer;
top: 10px;
right: 10px;
}
input[type="checkbox"]::after{
content: url("https://img.icons8.com/ios/16/000000/star.png");
position: absolute;
top: 0;
left: 0;
border-radius: 50%;
margin: auto;
height: 20px;
width: 20px;
pointer-events: none;
}
input[type="checkbox"]:checked:after {
content: url("https://img.icons8.com/ios-filled/16/000000/star.png");
}
input[type="checkbox"]:hover:after{
background: #D9DEEA;
}
.container dl {
margin: 0;
}
.container dl dt {
display: block;
font-size: 12px;
color: #6B7790;
}
.container dl dd {
margin: 0;
font-weight: normal;
color: #04246A;
}
<div class="container">
<input type="checkbox" />
<dl>
<dt>Ref</dt>
<dd>XXX123</dd>
</dl>
</div>
Which doesn't look good.
How can I fix this ? and thanks in advance.

You can add appearance:none to remove to checkbox appearance and set fixed height/width to checkbox and :after, changing :after to flex allows you to center the background.
body {
background-color: #04246A;
}
.container {
position: relative;
width: 204px;
max-width: 204px;
height: 82px;
max-height: 82px;
padding: 24px;
background: #fff;
display: flex;
flex-direction: column;
justify-content: space-between;
box-sizing: border-box;
color: black;
list-style: none;
border: 2px solid black;
}
input[type="checkbox"]{
height: 40px;
width: 40px;
position: absolute;
opacity: 1;
margin: auto;
cursor: pointer;
top: 10px;
right: 10px;
appearance: none;
outline: none;
}
input[type="checkbox"]::after{
content: url("https://img.icons8.com/ios/16/000000/star.png");
position: absolute;
top: 0;
left: 0;
border-radius: 50%;
margin: auto;
height: 40px;
width: 40px;
pointer-events: none;
display: flex;
justify-content: center;
align-items: center;
}
input[type="checkbox"]:checked:after {
content: url("https://img.icons8.com/ios-filled/16/000000/star.png");
}
input[type="checkbox"]:hover:after{
background: #D9DEEA;
}
.container dl {
margin: 0;
}
.container dl dt {
display: block;
font-size: 12px;
color: #6B7790;
}
.container dl dd {
margin: 0;
font-weight: normal;
color: #04246A;
}
<div class="container">
<input type="checkbox" />
<dl>
<dt>Ref</dt>
<dd>XXX123</dd>
</dl>
</div>

Related

How to make Search bar slide from right to left

This search bar now expands from left to right while hover or click. How to modify it, so it expands from right to left. CSS Only, no JS. I want to place this on the right side of the page.
Please help in modifing this code so it expands from the right to left.
Now, when the bar is sticky to the right side, it shakes a bit while expanding. Changing expand direction will remove shake effect.
.search-sticky {
position: sticky;
top: 30px;
left: 100%;
z-index: 55;
border-radius: 50px;
background-color: red;
padding: 2.5rem;
}
.search-icon {
position: relative;
width: 24px;
height: 24px;
flex-shrink: 0;
top: 3px
}
.search-input {
outline: none;
border: none;
background: none;
width: 0;
padding: 0;
color: white;
float: left;
transition: .3s;
line-height: 1.5;
font-size: 6rem;
position: relative;
left: 1rem;
}
.search-btn {
float: right;
width: 40px;
height: 40px;
border-radius: 50px;
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
transition: .3s;
}
.search-input:focus,
.search-input:not(:placeholder-shown) {
width: 200px;
}
.search-box:hover>.search-input {
width: 200px;
}
.search-box:hover>.search-btn,
.search-input:focus+.search-btn,
.search-input:not(:placeholder-shown)+.search-btn {
background: grey;
}
.search-sticky:hover,
.search-sticky:focus-within {
background-color: grey;
}
.search-sticky button {
padding: 0;
background: none;
border: none;
border-radius: 0;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
cursor: pointer;
}
<div class="search-sticky">
<form class="search-box">
<input type="text" name="q" id="search-query" class="search-input" placeholder="Search ....">
<a class="search-btn" href="#">
<button type="submit" class="search-button"><img class="search-icon" alt="Search" src="/icons/search.svg" /></button>
</a>
</form>
</div>
Updated
I hope this helps
.search-sticky {
position: sticky;
top: 30px;
left: 100%;
z-index: 55;
border-radius: 50px;
background-color: whitesmoke;
padding: 0.5rem 2.5rem;
}
.search-box{
display: flex;
justify-content: space-between;
align-items: center;
}
.search-icon {
position: relative;
width: 40px;
height: 40px;
margin-left: auto;
}
.search-input {
outline: none;
border: none;
background: none;
width: 0;
padding: 0;
color: white;
transition: .3s;
line-height: 1.5;
font-size: 4rem;
position: relative;
display: inline-block;
}
.search-btn {
width: 40px;
height: 40px;
border-radius: var(--br-md);
display: inline-block;
justify-content: center;
align-items: center;
text-decoration: none;
transition: .3s;
}
.search-input:focus,
.search-input:not(:placeholder-shown) {
width: calc(100% - 60px);
}
.search-box:hover>.search-input {
width: calc(100% - 60px);
}
/*.search-box:hover>.search-btn,
.search-input:focus+.search-btn,
.search-input:not(:placeholder-shown)+.search-btn {
background: grey;
}
// not needed */
.search-sticky:hover,
.search-sticky:focus-within {
background-color: lightgray;
}
.search-sticky button {
padding: 0;
background: none;
border: none;
border-radius: 0;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
cursor: pointer;
}
<div class="search-sticky">
<form class="search-box">
<input type="text" name="q" id="search-query" class="search-input" placeholder="Search ....">
<a class="search-btn" href="#">
<button type="submit" class="search-button"><img class="search-icon" alt="Search" src="https://img.icons8.com/ios-filled/2x/search.png" /></button>
</a>
</form>
</div>

How can I properly adjust margins in my css?

I have a simple distributed system project which aims to develop airlines booking and purchase system. In this project, the main goal is to achieve proper functionalities, not to achieve best visuality. However, I have really basic problem due to my lack of experience in web design area.
Any kind of interest of you will be appreciated!
In my home page, I tried to draw an airplane layout but the problem is margins. I can not arrange properly the seats in between plane borders.
Demonstration of my ugly home.php:
Architecture of my home.php:
<div class="content">
...
<div class="airplane">
...
<div class="cockpit">...</div>
<ol class="fuselage">
<li class="row row--1">
<ol class="seats">
<li class="seat">...</li>
</ol>
</ol>
</ol>
</div>
</div>
Here is my CSS code:
div.content
{
margin-left: 200px;
padding: 1px 16px;
height: auto;
}
#media screen and (max-width: 700px)
{
.sidebar
{
width: 100%;
height: auto;
position: relative;
}
.sidebar a
{
float: left;
}
div.content
{
margin-left: 0;
}
}
#media screen and (max-width: 400px)
{
.sidebar a
{
text-align: center;
float: none;
}
}
.airplane
{
margin: 10px auto;
max-width: 500px;
position: relative;
margin-left: 25px;
}
.cockpit
{
margin-left: 25px;
height: 250px;
position: relative;
overflow:hidden;
text-align: center;
border-bottom: 5px solid #993333;
}
.cockpit:before
{
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
height: 500px;
width: 98%;
border-radius: 50%;
border-right: 5px solid #993333;
border-left: 5px solid #993333;
}
.cockpit h2 {
width: 70%;
margin: 120px auto 35px auto;
}
.fuselage
{
margin-left: 25px;
border-right: 5px solid #993333;
border-left: 5px solid #993333;
}
ol
{
list-style :none;
padding: 0;
margin: 0;
}
.row
{
}
.seats
{
margin-left: 25px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
margin: 0 5px 0 250px;
}
.seat {
display: flex;
flex: 0 0 25.28571428571429%;
padding: 5px;
position: relative;
}
.seat:nth-child(3) {
margin-right: 15.28571428571429%;
}
.seat input[type=checkbox] {
position: absolute;
opacity: 0;
}
.seat input[type=checkbox]:checked + label {
background: yellow;
}
.seat input[type=checkbox]:disabled + label {
background: #dddddd;
text-indent: -9999px;
overflow: hidden;
}
.seat input[type=checkbox]:disabled + label:after {
content: "X";
text-indent: 0;
position: absolute;
top: 4px;
left: 50%;
transform: translate(-50%, 0%);
}
.seat input[type=checkbox]:disabled + label:hover {
box-shadow: none;
cursor: not-allowed;
}
.seat label {
display: block;
position: relative;
width: 70%;
text-align: center;
font-size: 11px;
font-weight: bold;
line-height: 1.5rem;
padding: 4px 0px;
background: green;
border-radius: 5px;
}
.seat label:before {
content: "";
position: absolute;
width: 75%;
height: 75%;
top: 1px;
left: 50%;
transform: translate(-50%, 0%);
background: rgba(255, 255, 255, 0.4);
border-radius: 3px;
}
.seat label:hover {
cursor: pointer;
box-shadow: 0 0 0px 2px #5C6AFF;
}
Could you please try seats class in below;
.seats
{
margin-left: 25px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-end;
margin: 0 5px 0 200px;
}
You can fix your margin-left in the following part of your code:
.seat {
display: flex;
flex: 0 0 25.28571428571429%;
padding: 5px;
margin-left: -50px; // lay seats over plane borders
position: relative;
}
With this customization, you can lay your seats over the plane.
This value is for demonstration purposes only and as an example

Pseudo element exists but not visible

The pattern has before content inject into the page, but it's not visible can you please suggest what is the issue?
.aloha {
font-family: Medium;
font-size: 74px;
color: green;
position: relative;
display: inline-block;
margin: 0;
height: 85px;
}
.aloha:before {
width: 100%;
height: 85px;
color: red;
content: attr(data-text);
display: block;
}
<h1 date-text='TEXT' class='aloha'>TEXT</h1>
There is a typo in your HTML. Replace date-text with data-text on your <h1> element:
.aloha {
font-family: Medium;
font-size: 74px;
color: green;
position: relative;
display: inline-block;
margin: 0;
height: 85px;
}
.aloha:before {
width: 100%;
height: 85px;
color: red;
content: attr(data-text);
display: block;
}
<h1 data-text='TEXT' class='aloha'>TEXT</h1>

Lower z-index overlaps higher

This is my HTML structure:
<div class="pageSlider">
Visitor's Lounge
News Stream
<a class="slide-button"></a>
</div>
And here are my CSS rules:
.pageSlider {
margin: 15px auto !important;
font-size: 1.2em;
white-space: nowrap;
height: 35px;
}
.pageSlider a[href] {
display: inline-block;
text-align: center;
text-decoration: none;
z-index: 2;
}
.pageSlider a[href].active {
color: #000;
}
.pageSlider .slide-button {
background-color: #cccc00;
position: relative;
top: -35px;
display: inline-block;
height: 35px;
padding: 0;
float: left;
height: inherit;
z-index: 1;
}
The .pageSlider .slide-button is set to z-index: 1 and .pageSlider a[href] is set to z-index: 2, but the lower z-index actually overlaps the higher.
I somehow need toget the .slide-button under the links, but I can't seem to figure out a better way.
Live demo:
(function(e){e.parseURL=function(e){if(typeof e==="undefined"&&typeof window.location.href!=="undefined")e=window.location.href;var t={whole:/^((http|https):\/\/)?((.*\.)?.*\..*|localhost|\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3})\/.*/,protocol:/^(http|https):\/\//,absolute:/^\/\/((.*\.)?.*\..*|localhost|\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3})\//,relative:/^[\/](?!\/).*(\..*|\/)?.*$/,params:/\?.*=.*(\&.*\=.*)+[^#.*]/},n={protocol:undefined,hostname:undefined,hash:undefined,href:{original:undefined,noparams:undefined},parentDomain:undefined,parameters:undefined,pathname:{nohash:undefined,withhash:undefined},type:undefined};if(typeof e!=="string")throw new TypeError("Argument must be a string!");else if(!t.whole.test(e)&&!t.absolute.test(e)&&!t.relative.test(e))throw new Error("Invalid string");n.href.original=e;if(e.indexOf("#")!==-1){n.hash=e.substring(e.indexOf("#"));e=e.substring(0,e.indexOf("#"))}if(t.params.test(e)){n.parameters={};var r=e.match(t.params)[0].substring(1).split("&");for(var i=0,s=r.length;i<s;i++){var o=r[i].split("=");n.parameters[o[0]]=o[1]}e=e.replace(t.params,"");n.href.noparams=e+(typeof n.hash!=="undefined"?n.hash:"")}if(t.protocol.test(e)){n.protocol=e.match(t.protocol)[0];n.hostname=e.replace(t.protocol,"");n.hostname=n.hostname.substring(0,n.hostname.indexOf("/"));n.parentDomain=n.hostname.split(".");n.parentDomain.splice(0,1);n.parentDomain=n.parentDomain.join(".");if(n.parentDomain=="")n.parentDomain=n.hostname;var u=e.replace(t.protocol,"");n.pathname.nohash=u.substring(u.indexOf("/"));u=undefined;n.type="normal"}else{n.protocol=window.location.href.match(t.protocol)[0];if(t.absolute.test(e)){var u=e.replace(/^\/\//,"");n.hostname=u.substring(0,u.indexOf("/"));n.pathnam.nohashe=u.substring(u.indexOf("/"));n.type="absolute";n.href.original=n.href.original.replace(/^\/\//g,n.protocol)}else if(t.relative.test(e)){n.hostname=window.location.href.replace(t.protocol,"");n.hostname=n.hostname.substring(0,n.hostname.indexOf("/"));n.pathname.nohash=n.href.original;n.type="relative"}else{throw new Error("Invalid string")}}n.pathname.withhash=n.pathname.nohash+n.hash;return n};if(typeof e(".pageSlider")[0]!=="undefined"){e.pageSlider=function(t){if(t==="update"){e('.pageSlider a.active:not([href="'+e.parseURL().hash+'"])').removeClass("active");e('.pageSlider a[href="'+e.parseURL().hash+'"]').addClass("active");e(".pageSlider").each(function(){var t=e(this);var n=t.find("a.slide-button");var r=t.find("a[href]");var i=r.size();var s=100/i;var o=r.index("a.active");r.css("width",s+"%");console.log(o);n.css("width",s+"%").animate({left:o*-1*s+"%"})});return e('.pageSlider a.active[href="'+e.parseURL("/index.php").hash+'"]')}};window.location.hash="lounge";e.pageSlider("update");e(window).on("hashchange",function(){e.pageSlider("update")})}})(jQuery)
.pageSlider {
margin: 15px auto !important;
font-size: 1.2em;
white-space: nowrap;
height: 35px;
}
.pageSlider a[href] {
display: inline-block;
text-align: center;
text-decoration: none;
color: #fff;
z-index: 2;
}
.pageSlider a[href].active {
color: #000;
}
.pageSlider .slide-button {
background-color: #cccc00;
position: relative;
top: -35px;
display: inline-block;
padding: 0;
float: left;
height: inherit;
z-index: 1;
}
body{background-color:#777}#media all and (max-width: 500px){.pageSlider{white-space: normal}.pageSlider a[href]{display: block !important;width: 100% !important}.pageSlider [href].active {background-color: #cccc00}.pageSlider .slide-button{display: none}}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pageSlider">
Visitor's Lounge
News Stream
<a class="slide-button"></a>
</div>
You forgot to add:
position:relative;
on your link (.pageSlider a[href]). z-index only applies to positioned elements.

Another css vertical align

Trying to get the grey box on the right to centre align without adding margins/padding to it:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
#frame { border: 1px solid #999; padding: 0.5em; width: 60%; margin: 0 auto; }
#header { height: 40px; line-height: 40px; background-color: #eee; position: relative; width: 100%; }
h3 { margin: 0em; padding: 0em; }
h3 span { margin-left: 0.5em; }
a { float: right; text-align: right; }
a span { vertical-align: middle; background-color: #ccc; width: 1em; height: 1em; color: #fff; margin-right: 0.5em; display: inline-block; }
#content { height: 16em; }
</style>
</head>
<body>
<div id="frame">
<div id="header">
<h3><span>Heading</span><span></span></h3>
</div>
<div id="content">
</div>
</div>
</body>
</html>
http://jsfiddle.net/hotdiggity/4yGh8/
There are a few different ways to go about this, but none of them are perfect.
I've modified the markup slightly to make it easier to write selectors for:
<div id="frame">
<div id="header">
<h3><span>Heading</span><span></span></h3>
</div>
<div id="content">
</div>
</div>
CSS Tables
The result might not be pretty if you have content that's going to wrap:
http://jsfiddle.net/4yGh8/4/
#frame { border: 1px solid #999; padding: 0.5em; width: 60%; margin: 0 auto; }
#header { height: 40px; line-height: 40px; background-color: #eee; position: relative; width: 100%; }
h3 { margin: 0em; padding: 0em; display: table; width: 100%; }
h3 span { display: table-cell; vertical-align: middle; }
h3 span { padding: 0 0.5em; width: 100% }
h3 span:last-child { width: 1px; line-height: 1; }
a { background-color: #ccc; width: 1em; height: 1em; color: #fff; display: block }
#content { height: 16em; }
Flexbox
Make sure you check http://caniuse.com/#search=flexbox to see which prefixes you need to make this work.
http://jsfiddle.net/4yGh8/6/ (prefixes not included)
#frame { border: 1px solid #999; padding: 0.5em; width: 60%; margin: 0 auto; }
#header { height: 40px; line-height: 40px; background-color: #eee; position: relative; width: 100%; }
h3 {
margin: 0em;
padding: 0em;
display: flex;
width: 100%;
justify-items: space-between;
align-items: center;
}
h3 span {
margin: 0 .5em;
}
h3 span:first-child {
flex: 1 1 auto;
}
a { background-color: #ccc; width: 1em; height: 1em; color: #fff; display: block }
#content { height: 16em; }
Absolute Positioning
http://jsfiddle.net/4yGh8/7/
#frame { border: 1px solid #999; padding: 0.5em; width: 60%; margin: 0 auto; }
#header { height: 40px; line-height: 40px; background-color: #eee; position: relative; width: 100%; }
h3 {
margin: 0em;
padding: 0em;
position: relative;
}
h3 span {
padding: 0 .5em;
}
h3 span:last-child {
position: absolute;
right: 0;
top: 50%;
margin-top: -.5em; /* half of the element's height */
}
a { background-color: #ccc; width: 1em; height: 1em; color: #fff; display: block }
#content { height: 16em; }
2 things you can do.
add another box en limit is in width until your block is in the middle with float right
use margin & padding
You just need to add position:relative to your #frame and then position:absolute;top:0;bottom:0; margin:auto; to yout #header. I edited your fiddle

Resources