Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
I'm trying to move the label above the input field when focus like this.
But in my other code, it only changes font-size and is not moving up. What am I missing?
I use the same CSS code for both:
CSS
input:focus + label > span {
font-size: 12px;
transform: translate3d(0, -80%, 0);
transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}
Target The Span Within The Lable
If you target the span contained in the label, you can control it with the below code.
input + label > span {
position: relative;
display: block;
bottom: -1em
}
Your code needs a lot of work, but start here:
body {
background-color: #f0f0f0;
}
form {
margin-left: 40%;
margin-top: 11%;
}
label {
font-family: monospace; 'Montserrat', sans-serif;
font-size: 19px;
margin-left: -26%;
z-index: -1;
/* border: 5px solid black;*/
}
.head {
margin-left: 43%;
margin-top: 5%;
font-size: 25px;
font-family: monospace;
}
form {
position: relative; }
.input-field {
display:block;
background: transparent;
border-width: 2px;
border-top: 0;
border-left: 0;
border-right: 0;
border: 0;
background: transparent;
outline: 0;
height: 23px;
border-color: black;
width: 130px;
z-index: 1;
margin-left: 0%;
}
/*input:focus {
transform: scale3d(1, 1, 1);
transition: width 5s;
transition-delay: 3s;
transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
z-index: -1;
background: green; /* ::after background *
} */
label::after {
content: '';
position: absolute;
top: 100%;
left: 0;
width: 30%;
height: 20%;
transition: transform 0.8s;
}
label::after {
z-index: -1;
background: green; /* ::after background */
transform: scale3d(1, 0.1, 1);
transform-origin: 0% 0%;
}
input:focus + label::after {
transform: scale3d(1, -2, 1);
transition-timing-function: linear;
}
input:focus + label > span {
font-size: 14px;
transform: translate3d(0, -200%, 0);
transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}
input + label > span {
position: relative;
display: block;
bottom: -1em
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<title>Test</title>
</head>
<body>
<p class="head">Sign In</p>
<form>
<div class="username">
<input type="text" name="name" class="input-field" id="user"/> <!--input filed-->
<label for="user">
<span class="username">Username</span>
</label>
</div>
</form>
</body>
</html
Filtered Code. You can Use This Code. This is working Fine.
.object {
position: relative;
z-index: 1;
display: inline-block;
width: 300px; /* input field width */
}
.input {
position: relative;
display: block;
float: right;
width: 30%;
border: none;
background: black;
color: yellow; /* font color when typing */
font-family: monospace;
/* for box shadows to show on iOS */
}
.input:focus {
outline: none;
}
.label {
display: inline-block;
color: black; /* label font color */
font-size: 18px;
font-family: monospace;
}
.label-content {
position: relative;
display: block;
padding: .6em 0;
}
.input--jiro {
padding: 0.85em 0.5em;
width: 100%; /* input width when focus */
background: blue ; /* input background color */
opacity: 0;
transition: opacity 0.3s;
}
.label-content--jiro {
transition: transform 0.3s 0.3s;
}
.label--jiro {
position: absolute;
left: 0;
padding: 0 0.85em;
width: 120%; /* underline width */
height: 100%;
}
label::after {
content: '';
position: absolute;
top: 100%;
left: 0;
width: 80%;
height: 100%;
transition: transform .8s;
}
label::after {
z-index: -1;
background: green; /* ::after background */
transform: scale3d(1, 0.1, 1);
transform-origin: 0% 0%; /* 0% 50%; * for middle */
}
input:focus + label::after {
transform: scale3d(1, -1, 1);
transition-timing-function: linear;
}
input:focus + label > span {
font-size: 12px;
transform: translate3d(0, -80%, 0);
transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}
<p class="head">Sign In</p>
<section>
<span class="object">
<input class="input input--jiro" type="text" id="input-10" /> <!-- input field -->
<label class="label label--jiro" for="input-10">
<span class="label-content label-content--jiro">Username</span> <!-- Label -->
</label>
</span>
</section>
Related
Unable to focus on rectangle outside of toggle switch on selecting and I wanted to add the functionality to focus on the label class which is used for outside rectangle of toggle switch, but was completely stuck. I am trying to do, is if the switch is pressed, then focus should be on rectangle box. I am using below HTML and CSS. Any help appreciated.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.switch {
position: relative;
border: 1px solid rgb(112, 112, 112);
display: flex;
align-items: center;
width: 280px;
height: 70px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
left:234px;
position: absolute;
cursor: pointer;
top: 20px;
right: 0;
bottom: 0;
height: 24px;
width: 40px;
background-color: grey;
-webkit-transition: 4s;
transition: 4s;
border-radius: 34px;
}
.slider:before {
position: absolute;
content: "";
height: 18px;
width: 18px;
left: 4px;
bottom: 4px;
background-color: white;
border-radius: 50%;
}
input:checked + .slider {
background-color: #2196F3;
}
.switch:hover{
box-shadow: 0 0 10px red;
}
.switch:active{
border-radius: 5 10px;
}
.switch:focus{
background-color: #0064D2;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(100%);
}
.switch label {
position: absolute;
left:2px;
width: 234px;
height: 22px;
color: rgb(65, 65, 65);
font-size: 16px;
font-weight: normal;
letter-spacing: 0.15px;
line-height: 22px;
}
</style>
</head>
<body>
<h2>Toggle Switch</h2>
<label class="switch">
<label for="toggle-switch"
>Switch label
</label>
<input type="checkbox" id="toggle-switch">
<span class="slider round"></span>
</label>
</body>
</html>
I have a toggle switch below and I'm trying to position it somewhere else on my page but for some reason it doesn't go past this tiny bubble of space. I added the 'top' and left' elements under .switch{ but as I increase the numbers, the button stays put. Does anyone know how to fix this? There are position elements in the other classes and whenever I change the numbers, the toggle switch and text gets all messed up. I want to be able to move the button in its entirety.
html:
<label class="switch">
<input type="checkbox" id="togBtn">
<div class="slider round">
<!--ADDED HTML -->
<span class="on">ON</span>
<span class="off">OFF</span>
<!--END-->
</div>
</label>
css:
.switch {
position: absolute;
display: inline-block;
width: 90px;
height: 34px;
top: 500;
left: 600;
}
.switch input {display:none;}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ca2222;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2ab934;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(55px);
-ms-transform: translateX(55px);
transform: translateX(55px);
}
.on
{
display: none;
}
.on, .off
{
color: white;
position: absolute;
transform: translate(-50%,-50%);
top: 50%;
left: 50%;
font-size: 10px;
font-family: Verdana, sans-serif;
}
input:checked+ .slider .on
{display: block;}
input:checked + .slider .off
{display: none;}
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;}
top & left value need unit eg. 500px, 50rem or 10% but why you added position :absolute in .switch class, if position required for your case then ok, but using absolute positioning the switch is not proper solution
I just downloaded an HTML and CSS template online and want to modify the code to adjust the hamburger menu icon to the right and have the menu slide from the right side but I had no idea about which part I should change
I have attached a screenshot of the interface below for reference. Thanks!
/*menu*/
#menuToggle
{
display: block;
position: relative;
top: 50px;
left: 50px;
z-index: 1;
-webkit-user-select: none;
user-select: none;
}
#menuToggle a
{
text-decoration: none;
color: #232323;
transition: color 0.3s ease;
}
#menuToggle a:hover
{
color: tomato;
}
#menuToggle input
{
display: block;
width: 40px;
height: 32px;
position: absolute;
top: -7px;
left: -5px;
cursor: pointer;
opacity: 0; /* hide this */
z-index: 2; /* and place it over the hamburger */
-webkit-touch-callout: none;
}
/*
* Just a quick hamburger
*/
#menuToggle span
{
display: block;
width: 33px;
height: 4px;
margin-bottom: 5px;
position: relative;
background: #cdcdcd;
border-radius: 3px;
z-index: 1;
transform-origin: 4px 0px;
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
opacity 0.55s ease;
}
#menuToggle span:first-child
{
transform-origin: 0% 0%;
}
#menuToggle span:nth-last-child(2)
{
transform-origin: 0% 100%;
}
/*
* Transform all the slices of hamburger
* into a crossmark.
*/
#menuToggle input:checked ~ span
{
opacity: 1;
transform: rotate(45deg) translate(-2px, -1px);
background: #ffffff;
}
/*
* But let's hide the middle one.
*/
#menuToggle input:checked ~ span:nth-last-child(3)
{
opacity: 0;
transform: rotate(0deg) scale(0.2, 0.2);
}
/*
* Ohyeah and the last one should go the other direction
*/
#menuToggle input:checked ~ span:nth-last-child(2)
{
transform: rotate(-45deg) translate(0, -1px);
}
/*
* Make this absolute positioned
* at the top left of the screen
*/
#menu
{
position: absolute;
width: 300px;
margin: -100px 0 0 -50px;
padding: 50px;
padding-top: 125px;
background: #ededed;
list-style-type: none;
-webkit-font-smoothing: antialiased;
/* to stop flickering of text in safari */
transform-origin: 0% 0%;
transform: translate(-100%, 0);
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}
#menu li
{
padding: 10px 0;
font-size: 22px;
}
/*
* And let's slide it in from the left
*/
#menuToggle input:checked ~ ul
{
transform: none;
}
/*----------------------------------menu----------------------------*/
.section {
position: relative;
height: 100vh;
}
.section .section-center {
position: absolute;
top: 50%;
left: 0;
right: 0;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
#booking {
font-family: 'Montserrat', sans-serif;
background-image: url('../img/dog.jpeg');
background-size: cover;
background-position: center;
}
#booking::before {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
background: rgba(143, 215, 230, 0.6);
}
.booking-form {
background-color: #fff;
padding: 60px 20px;
-webkit-box-shadow: 0px 5px 20px -5px rgba(0, 0, 0, 0.3);
box-shadow: 0px 5px 20px -5px rgba(0, 0, 0, 0.3);
border-radius: 4px;
}
.booking-form .form-group {
position: relative;
margin-bottom: 30px;
}
.booking-form .form-control {
background-color: #ebecee;
border-radius: 4px;
border: none;
height: 40px;
-webkit-box-shadow: none;
box-shadow: none;
color: #3e485c;
font-size: 14x;
}
.booking-form .form-control::-webkit-input-placeholder {
color: rgba(62, 72, 92, 0.3);
}
.booking-form .form-control:-ms-input-placeholder {
color: rgba(62, 72, 92, 0.3);
}
.booking-form .form-control::placeholder {
color: rgba(62, 72, 92, 0.3);
}
.booking-form input[type="date"].form-control:invalid {
color: rgba(62, 72, 92, 0.3);
}
.booking-form select.form-control {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.booking-form select.form-control+.select-arrow {
position: absolute;
right: 0px;
bottom: 4px;
width: 40px;
line-height: 32px;
height: 32px;
text-align: center;
pointer-events: none;
color: rgba(62, 72, 92, 0.3);
font-size: 14px;
}
.booking-form select.form-control+.select-arrow:after {
content: '\279C';
display: block;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.booking-form .form-label {
display: inline-block;
color: #3e485c;
font-weight: 700;
margin-bottom: 6px;
margin-left: 7px;
}
.booking-form .submit-btn {
display: inline-block;
color: #fff;
background-color: #1e62d8;
font-weight: 700;
padding: 14px 30px;
border-radius: 4px;
border: none;
-webkit-transition: 0.2s all;
transition: 0.2s all;
}
.booking-form .submit-btn:hover,
.booking-form .submit-btn:focus {
opacity: 0.9;
}
.booking-cta {
margin-top: 80px;
margin-bottom: 30px;
}
.booking-cta h1 {
font-size: 52px;
text-transform: uppercase;
color: #fff;
font-weight: 700;
}
.booking-cta p {
font-size: 20px;
color: rgba(255, 255, 255, 0.8);
}
footer {
position: relative;
height: 0px;
width: 100%;
background-color: #333333;
}
p.copyright {
position: absolute;
width: 100%;
color: #fff;
line-height: 40px;
font-size: 0.7em;
text-align: center;
bottom:0;
}
HTML Code:
<nav role="navigation">
<div id="menuToggle">
<!--
A fake / hidden checkbox is used as click reciever,
so you can use the :checked selector on it.
-->
<input type="checkbox" />
<!--
Some spans to act as a hamburger.
They are acting like a real hamburger,
not that McDonalds stuff.
-->
<span></span>
<span></span>
<span></span>
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>Info</li>
<li>Contact</li>
</ul>
</div>
</nav>
<div id="booking" class="section">
<div class="section-center">
<div class="container">
<div class="row">
<div class="col-md-7 col-md-push-5">
<div class="booking-cta">
<h1>Bring Your Pet to Work</h1>
<p>Caring and Loving Pet service
</p>
</div>
</div>
<div class="col-md-4 col-md-pull-7">
<div class="booking-form">
<form>
<div class="form-group">
<span class="form-label">Where do you work? </span>
<input class="form-control" type="text" placeholder="Enter an address or zipcode">
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<span class="form-label">Drop off</span>
<input class="form-control" type="date" required>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<span class="form-label">Pick up</span>
<input class="form-control" type="date" required>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<span class="form-label">Pet?</span>
<select class="form-control">
<option>Cat</option>
<option>Dog</option>
<option>Others</option>
</select>
<span class="select-arrow"></span>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<span class="form-label">Service</span>
<select class="form-control">
<option>Day Care</option>
<option>Boarding</option>
<option>Sitting</option>
</select>
<span class="select-arrow"></span>
</div>
</div>
</div>
<div class="form-btn">
<button class="submit-btn">Check availability</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
//about the white space try set the margin-top of the body at 0;
//about the the hamberger icon try this:
nav {
display:flex;
flex-direction: flex-end; }
To move the hamburger to the right side, make sure your #menuToggle position is fixed or absolute, then removeleft: 50px; and add right: 50px; and if you want more top space you can increase top attribute value, ex: top: 100px; or top: 0; if you don't want any top space.
I've commented the CSS bellow, in case you were wondering what i've changed.
Here is the CSS code you should use: (I've tested it and it's working for me)
#menuToggle {
display: block;
position: fixed;
top: 50px; /** NOTE: decrease The pixels if want less space */
right: 50px;/** NOTE: Change This line */
z-index: 1;
-webkit-user-select: none;
user-select: none;
}
#menuToggle a {
text-decoration: none;
color: #232323;
transition: color 0.3s ease;
}
#menuToggle a:hover {
color: tomato;
}
#menuToggle input {
display: block;
width: 40px;
height: 32px;
position: absolute;
top: -7px;
left: -5px;
cursor: pointer;
opacity: 0;
/* hide this */
z-index: 2;
/* and place it over the hamburger */
-webkit-touch-callout: none;
}
/*
* Just a quick hamburger
*/
#menuToggle span {
display: block;
width: 33px;
height: 4px;
margin-bottom: 5px;
position: relative;
background: #cdcdcd;
border-radius: 3px;
z-index: 1;
transform-origin: 4px 0px;
transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
opacity 0.55s ease;
}
#menuToggle span:first-child {
transform-origin: 0% 0%;
}
#menuToggle span:nth-last-child(2) {
transform-origin: 0% 100%;
}
/*
* Transform all the slices of hamburger
* into a crossmark.
*/
#menuToggle input:checked~span {
opacity: 1;
transform: rotate(45deg) translate(-2px, -1px);
background: #ffffff;
}
/*
* But let's hide the middle one.
*/
#menuToggle input:checked~span:nth-last-child(3) {
opacity: 0;
transform: rotate(0deg) scale(0.2, 0.2);
}
/*
* Ohyeah and the last one should go the other direction
*/
#menuToggle input:checked~span:nth-last-child(2) {
transform: rotate(-45deg) translate(0, -1px);
}
/*
* Make this absolute positioned
* at the top left of the screen
*/
#menu {
position: absolute;
width: 300px;
margin: -100px 0 0;/** NOTE: Change this line */
padding: 50px;
padding-top: 125px;
right: -50px; /*NOTE: Add this line */
background: #ededed;
list-style-type: none;
-webkit-font-smoothing: antialiased;
/* to stop flickering of text in safari */
transform-origin: 0% 0%;
transform: translateX(100%);/** NOTE: Change this line */
transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
}
#menu li {
padding: 10px 0;
font-size: 22px;
}
/*
* And let's slide it in from the left
*/
#menuToggle input:checked~ul {
transform: none;
}
/*----------------------------------menu----------------------------*/
There's a little royalblue background appearing (between border-bottom: 2px solid white; & ::after element) when I unfocus.
I don't know why is that happening.
body {
background-color: royalblue;/*#f0f0f0;*/
}
label {
font-family: 'Montserrat', sans-serif;
font-size: 14px;
z-index: -1;
border: 0;
color: white;
position: relative;
}
.head {
color: white;
margin-left: 44%;
font-family: monospace;
font-size: 25px;
}
/*.content {
margin-top: 10%;
margin-left: 41%;
}*/
.password {
margin-top: 8%;
}
form {
position: relative;
}
input {
position: absolute;
font-family: 'Montserrat', sans-serif;
font-size: 15px;
background: transparent;
border: 0; /* BORDER yes/no */
border-bottom: 2px solid white;
background: transparent;
outline: 0;
height: 25px;
width: 180px;
z-index: 1;
margin-top: 5px;
}
/*input:focus {
outline: 1;
}*/
label::after {
content: '';
position: absolute;
top: -2px;
left: 0;
width: 180px;
height: 25px;
border-radius: 2px;
transition: transform .3s;
}
label::after{
z-index: -1;
background: beige; /*#a86bf;*/
transform: scale3d(1, 0, 1);
transform-origin: 0% 0%;
}
input:focus {
border-radius: 1px;
}
input:focus + label::after,
input:valid + label::after {
transform: scale3d(1, -1, 1);
transition-timing-function: linear;
}
span {
position: relative;
margin-top: -30px;
display: block;
padding: .6em 0;
padding-left: -5px;
transition: top .5s ease, font-size .5s ease;
/* transition: transform 1s 2s;*/
top: 0;
}
input:focus + label > span,
input:valid + label > span {
top: -20px;
font-size: 11px;
padding-bottom: 15px;
}
/* font-family: monospace;*/
/*transform: translate3d(0, -80%, 0); */
/* transition-timing-function: linear;*/
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<title>Test</title>
</head>
<body>
<p class="head">Sign In</p>
<form>
<div class="content">
<div class="username">
<input type="text" name="name" class="user-input" id="user" required /> <!--input field-->
<label class="user-label" for="user"><span>Username</span></label>
</div>
<div class="password">
<input type="text" name="name" class="pass-input" id="pass" required /> <!-- input field -->
<label class="pass-label" for="pass"><span>Password</span></label>
</div>
</div>
</form>
</body>
</html>
Update:
I changed to top: 1px;, also change border-bottom to black, now this is the result (full code). Why is there some excess scale at the bottom? how to remove those?
You have a top: -2px on label, and your problem is when you blur, so a solution is move top: -2px to input:focus + label::after and input:focus + label::after, so you dont have that gap when its not focused or validated
body {
background-color: royalblue;/*#f0f0f0;*/
}
label {
font-family: 'Montserrat', sans-serif;
font-size: 14px;
z-index: -1;
border: 0;
color: white;
position: relative;
}
.head {
color: white;
margin-left: 44%;
font-family: monospace;
font-size: 25px;
}
/*.content {
margin-top: 10%;
margin-left: 41%;
}*/
.password {
margin-top: 8%;
}
form {
position: relative;
}
input {
position: absolute;
font-family: 'Montserrat', sans-serif;
font-size: 15px;
background: transparent;
border: 0; /* BORDER yes/no */
border-bottom: 2px solid white;
background: transparent;
outline: 0;
height: 25px;
width: 180px;
z-index: 1;
margin-top: 5px;
}
/*input:focus {
outline: 1;
}*/
label::after {
content: '';
position: absolute;
left: 0;
width: 180px;
height: 25px;
border-radius: 2px;
transition: transform .3s;
}
label::after{
z-index: -1;
background: beige; /*#a86bf;*/
transform: scale3d(1, 0, 1);
transform-origin: 0% 0%;
}
input:focus {
border-radius: 1px;
}
input:focus + label,
input:valid + label {
top: -2px;
}
input:focus + label::after,
input:valid + label::after {
transform: scale3d(1, -1, 1);
transition-timing-function: linear;
}
span {
position: relative;
margin-top: -30px;
display: block;
padding: .6em 0;
padding-left: -5px;
transition: top .5s ease, font-size .5s ease;
top: 0;
}
input:focus + label > span,
input:valid + label > span {
top: -20px;
font-size: 11px;
padding-bottom: 15px;
}
/* font-family: monospace;*/
/*transform: translate3d(0, -80%, 0); */
/* transition-timing-function: linear;*/
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<title>Test</title>
</head>
<body>
<p class="head">Sign In</p>
<form>
<div class="content">
<div class="username">
<input type="text" name="name" class="user-input" id="user" required /> <!--input field-->
<label class="user-label" for="user"><span>Username</span></label>
</div>
<div class="password">
<input type="text" name="name" class="pass-input" id="pass" required /> <!-- input field -->
<label class="pass-label" for="pass"><span>Password</span></label>
</div>
</div>
</form>
</body>
</html>
you have an extra code, you can see here in comment section
label::after {
content: '';
position: absolute;
/*top: -2px;*/
left: 0;
width: 180px;
height: 25px;
border-radius: 2px;
transition: transform .3s;
}
Add top:1px on label::after See Below.
label::after {
content: '';
position: absolute;
left: 0;
top: 1px;
width: 180px;
height: 25px;
border-radius: 2px;
transition: transform .3s;
}
This is generally a hack which i am trying to figure out in css, From what I can gather it should be working in theory and it isn't.
#expand {
width: 30px;
height: 30px;
background-color: rgba(0, 0, 0, 0);
}
#btn {
display: none;
}
#btn:checked+label:before {
transform: rotate(90deg);
}
#btn:checked+label:after {
transform: rotate(180deg);
}
#btn:checked+.button:before {
display: none;
}
#btn:checked+.button:after {
display: inline-block;
}
.button {
position: relative;
width: 25px;
height: 25px;
display: inline-block;
}
.button:before,
.button:after {
content: "";
position: absolute;
background-color: black;
transition: transform 0.35s ease-out;
}
/* Vert Line */
.button:before {
top: 0;
left: 46%;
width: 4px;
height: 100%;
margin-left: 2px;
margin-top: 2px;
}
/* Horiz Line */
.button:after {
top: 50%;
left: 0;
width: 100%;
height: 4px;
margin-left: 2px;
}
.inform {
display: none;
}
<div id="expand">
<input id="btn" type="checkbox">
<label class="button" for="btn"></label>
<div class="inform">
<h3>Heading</h3>
<p>Alot of content.</p>
</div>
So as you can see, I have the "hack" for the click event on changing the style for .button using a checkbox.
I then used the + selector to target the div .inform.
If i am correct the + selector means it targets the immediate following element, In which case this should work. But it does not, Could someone possibly help clear my understanding of this and if i am wrong, otherwise could you help point me in the right direction to get this to work.
Summary:
I would like to get the header and paragraph to display when the checkbox is checked, aswell as getting the + symbol to rotate.
You've got similar selectors:
#btn:checked+.button:before {
display: none;
}
#btn:checked+.button:before {
display: inline-block;
}
And #btn:checked+label:before and #btn:checked+.button:before are the same thing.
I think it should look like:
#expand {
width: 30px;
height: 30px;
background-color: rgba(0, 0, 0, 0);
}
#btn {
display: none;
}
#btn:checked+label:before {
transform: rotate(90deg);
}
#btn:checked+label:after {
transform: rotate(180deg);
}
#btn:checked+.button:before {
display: none;
}
#btn:checked ~ .inform {
opacity: 1;
}
.button {
position: relative;
width: 25px;
height: 25px;
display: inline-block;
}
.button:before,
.button:after {
content: "";
position: absolute;
background-color: black;
transition: transform 0.35s ease-out;
}
/* Vert Line */
.button:before {
top: 0;
left: 46%;
width: 4px;
height: 100%;
margin-left: 2px;
margin-top: 2px;
}
/* Horiz Line */
.button:after {
top: 50%;
left: 0;
width: 100%;
height: 4px;
margin-left: 2px;
}
.inform {
display: inline-block;
opacity: 0;
transition: all .5s ease;
}
<div id="expand">
<input id="btn" type="checkbox">
<label class="button" for="btn"></label>
<div class="inform">
<h3>Heading</h3>
<p>Alot of content.</p>
</div>