Questions(A is wrote by myself, and B is from online course):
A can achieve the same effect which is more simplle than B, which should I choose when in real project?
I tried to delete the a11y and found that there's no influence on results, so what's a11y in B for?
how can .button li a:after,.button li a:after in B form a border? why don't do that like me just add a box-shadow to li or a?
A(css&html)
body {
padding: 50px;
}
.button li {
float: left;
}
.button li a {
display: inline-block;
position: relative;
width: 107px;
height: 35px;
z-index: 1;
overflow: hidden;
border-radius: 50px;
text-align: center;
line-height: 35px;
color: #1e1e1e;
box-shadow: inset 0px 0px 0px 2px #d3d2d2;
}
.button li .button-inner {
position: relative;
z-index: 3;
}
.mask {
display: block;
position: absolute;
bottom: 0;
width: 107px;
height: 0;
z-index: 1;
/* border-radius: 50px; */
background-color: #d6d6d6;
opacity: 0;
transition: all 0.2s ease-in;
}
.button li a:hover .mask {
opacity: 1;
height: 35px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="button">
<ul>
<li>
<a href="#">
<span class="button-inner">
探索
</span>
<span class="mask"></span>
</a>
</li>
</ul>
</div>
</body>
</html>
B(css&html)
body {
padding: 50px;
}
.button ul li {
float: left;
}
.button li a {
display: inline-block;
position: relative;
line-height: 30px;
text-align: center;
color: #1e1e1e;
/* 文字间距 */
letter-spacing: 0.5px;
border-radius: 50px;
overflow: hidden;
z-index: 1;
cursor: pointer;
vertical-align: middle;
box-sizing: border-box;
}
.button-inner {
position: relative;
z-index: 3;
display: block;
border-radius: 22px;
padding: 5px 37px 0 37px;
margin-right: 0px;
box-sizing: border-box;
}
.a11y {
height: 1px;
overflow: hidden;
position: absolute !important;
width: 1px;
display: block;
margin: 0;
padding: 0;
}
.mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
background-color: #d6d6d6;
padding-top: 0px;
line-height: 46px;
color: #fff;
display: block;
transition: transform 0.2s ease-in;
transform: translate(0%, 105%) translate3d(0px, 0px, 0px);
}
.button li a:after,
.button li a:after {
content: "";
display: block;
position: absolute;
z-index: 1;
top: 1px;
left: 1px;
bottom: 1.1px;
right: 1px;
box-shadow: inset 0px 0px 0px 2px #d3d2d2;
border-radius: 50px;
}
.button li a:hover .mask {
transform: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="button">
<ul>
<li>
<a href="#">
<span class="button-inner">
探索
<span class="a11y"></span>
</span>
<span class="mask"></span>
</a>
</li>
</ul>
</div>
</body>
</html>
When you give z-index to an element, it gets that index relative to the scope. So in the second block of code from online source, they gave scope of position: absolute; to the :before and :after pseudo elements.
You can modify your code to have position absolute too and it will give it expected z-index rendering, however then it will move the element to a different place on the screen, as it's not bounded by the parent container anymore.
Thus, a good way is to add a pseudo element and give it the styling.
However if you want to make your code work, simply change the z-index of mask from 0 to -1.
body {
padding: 50px;
}
.button li {
float: left;
}
.button li a {
display: inline-block;
position: relative;
width: 107px;
height: 35px;
z-index: 1;
border-radius: 50px;
text-align: center;
line-height: 35px;
color: #1e1e1e;
box-shadow: inset 0px 0px 0px 2px #d3d2d2;
}
.button li .button-inner {
z-index: 3;
}
.mask {
display: block;
position: absolute;
bottom: -35px;
width: 107px;
height: 35px;
z-index: 1;
border-radius: 50px;
background-color: #d6d6d6;
opacity: 0;
transition: all 0.1s linear;
}
.button li a:hover .mask {
bottom: 0;
opacity: 1;
z-index: -1;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="button">
<ul>
<li>
<a href="#">
<span class="button-inner">
探索
</span>
<span class="mask"></span>
</a>
</li>
</ul>
</div>
</body>
</html>
Related
Hello I just started with HTML & CSS and I am currently working on my first website. I have the problem that my nav bar delays the div below it when the div (called Start) is set to relative. I have to scroll to see the full image in the div. But when I set it to absolute it centers the div perfectly but the nav bar is not visible anymore. I would be grateful if someone could help me!
HTML
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>RATA</title>
<link rel="stylesheet" href="css/styles.css">
<link rel="icon" href="favicon.ico">
</head>
<body>
<header>
<img class="Logo" src="images/R-white.png" alt="Skull-Logo">
<nav>
<ul class="nav__links">
<li>Roadmap</li>
<li>About</li>
<li>Team</li>
<li>FAQ</li>
</ul>
</nav>
<a class="cta" href="#"><button>Mint</button></a>
</header>
<div class="Start">
<img class="background" src="images/RATA-small.svg" alt="RATA">
</div>
</body>
</html>
CSS
#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#500&display=swap');
/************** PARAM SELECTORS ******************/
body {
margin: 0;
}
/*******************CLASS SELECTORS*****************/
* {
box-sizing: border-box;
margin: 0;
padding: 0;
background-color: #191919;
z-index: 1;
}
li, a, button {
font-family: 'Montserrat', sans-serif;
font-weight: 500;
font-size: 16px;
color: #edf0f1;
text-decoration: none;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 30px 10%;
}
.Logo {
cursor: pointer;
height: 100px;
margin: 0;
}
.nav__links {
list-style: none;
}
.nav__links li {
display: inline-block;
padding: 0px 20px;
}
.nav__links li a {
transition: all 0.3s ease 0s;
}
.nav__links li a:hover {
color: #0088a9;
}
.cta button {
padding: 9px 25px;
background-color: rgba(0, 136, 169, 1);
border: none;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease 0s;
}
.cta button:hover {
background-color: rgba(0, 136, 169, 0.8)
}
/**Div**/
.Start {
position: relative;
bottom: 0;
width: 100%;
}
/** Image in Div**/
.background {
margin-top: 0px;
bottom: 0;
position: relative;
z-index: 0
}
I have to scroll to see the full image in the div.
That sounds like the image height is simply too large for your screen, here I set it to 200px:
#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#500&display=swap');
/************** PARAM SELECTORS ******************/
body {
margin: 0;
}
/*******************CLASS SELECTORS*****************/
* {
box-sizing: border-box;
margin: 0;
padding: 0;
background-color: #191919;
z-index: 1;
}
li, a, button {
font-family: 'Montserrat', sans-serif;
font-weight: 500;
font-size: 16px;
color: #edf0f1;
text-decoration: none;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 30px 10%;
}
.Logo {
cursor: pointer;
height: 100px;
margin: 0;
}
.nav__links {
list-style: none;
}
.nav__links li {
display: inline-block;
padding: 0px 20px;
}
.nav__links li a {
transition: all 0.3s ease 0s;
}
.nav__links li a:hover {
color: #0088a9;
}
.cta button {
padding: 9px 25px;
background-color: rgba(0, 136, 169, 1);
border: none;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease 0s;
}
.cta button:hover {
background-color: rgba(0, 136, 169, 0.8)
}
/**Div**/
.Start {
position: relative;
bottom: 0;
width: 100%;
}
/** Image in Div**/
.background {
margin-top: 0px;
bottom: 0;
z-index: 0;
width: 100%;
height: 200px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>RATA</title>
<link rel="stylesheet" href="css/styles.css">
<link rel="icon" href="favicon.ico">
</head>
<body>
<header>
<img class="Logo" src="images/R-white.png" alt="Skull-Logo">
<nav>
<ul class="nav__links">
<li>Roadmap</li>
<li>About</li>
<li>Team</li>
<li>FAQ</li>
</ul>
</nav>
<a class="cta" href="#"><button>Mint</button></a>
</header>
<div class="Start">
<img class="background" src="https://images.unsplash.com/photo-1648852071390-7a17e3f2580a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80">
</div>
</body>
</html>
Click the Full Page button to see the snippet in full screen of your device
By using nth-child(1) & nav .start-home,a:nth-child(1):hover~.animation I should define the properties of home link and it's animation like it's width and position. But to adjust the width and position of the animation of the home link I have to make adjustments in nnth-child(2). And same goes for about link I need to do adjustments in nth-child(3).
In the end I can make the animation work for the last sign-in link. Also the animation is not running properly, it's breaking in the middle. Run the code and you will get better understanding of my problem.
body{
box-sizing: border-box;
font-family: sans-serif;
background-color: rgb(255, 238, 238);
}
nav{
position: relative;
margin: 0;
padding: 0;
box-shadow: 0 2px 3px 0;
width: 100%;
height: 50px;
background-color: #04111ffa;
line-height: 50px;
font-size: 15px;
padding: 0px 20px;
}
nav a{
width: 100%;
font-size: 15px;
color: seashell;
position: relative;
text-decoration: none;
text-transform: uppercase;
line-height: 50px;
z-index: 5;
text-align: center;
}
nav .animation{
position: absolute;
height: 50px;
top: 0;
z-index: 0;
width: 100px;
background-color: rgb(58, 233, 218);
border-radius: 10%;
transition: all 0.5s ease 0s;
}
a:nth-child(1){
width: 150px;
left: 0;
}
nav .start-home,a:nth-child(1):hover~.animation {
width: 80px;
left: 70px;
}
a:nth-child(2){
left: 50px;
width: 150px;
}
nav .start-about,a:nth-child(2):hover~.animation {
width: 80px;
left: 70px;
}
a:nth-child(3){
left: 70px;
width: 120px;
}
nav .start-contact,a:nth-child(3):hover~.animation {
width: 80px;
left: 140px;
}
a:nth-child(4){
left: 90px;
width: 170px;
}
nav .start-privacy-policy,a:nth-child(4):hover~.animation {
width: 90px;
left: 225px;
}
a:nth-child(5){
left: 110px;
width: 200px;
}
nav .start-docs,a:nth-child(5):hover~.animation {
width: 145px;
left: 315px;
}
a:nth-child(6){
left: 130px;
width: 100px;
}
.search-container{
float: right;
}
input[type=text]{
padding: 6px;
margin-top: 13px;
font-size: 17px;
border: none;
border-radius: 15px;
}
.search-container button{
float: right;
padding: 6px 10px;
margin-top: 13px;
margin-right: 30px;
font-size: 17px;
border-radius: 15px;
background-color: rgb(58, 233, 218);
}
.search-container button:hover{
background-color: rgb(35, 168, 157);
}
.icon{
color: white;
z-index: 5;
}
.search-container{
float: right;
}
.links{
display: inline-block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
<link rel="stylesheet" href="navbar.css">
<title>Document</title>
</head>
<body>
<header>
<nav>
<div class="links">
<span class="icon fas fa-bars"></span>
Home
About
Contact
Privacy Policy
Sign-in
<div class="animation start-home"></div>
</div>
<div class="search-container">
<form>
<input type="text" placeholder="Search..." name="search" class="searchbar">
<button type="submit"><i class="fas fa-search"></i><span class="text">Search</span></button>
</form>
</div>
</nav>
</header>
</body>
</html>
If I understood you correctly, then perhaps this example can help you:
const animationElement = document.querySelector('.links .animation');
const defaultElement = document.querySelector('.links a'); // set default element !
const slideToElement = (el) => {
if (el) {
animationElement.style.left = el.offsetLeft + 'px';
animationElement.style.width = el.offsetWidth + 'px';
} else {
animationElement.style.removeProperty('left');
animationElement.style.removeProperty('width');
}
}
// tracking all hovers on "a" links
document.querySelector('.links').addEventListener('mouseover', (ev) => ev.target.matches('a') && slideToElement(ev.target))
// tracking leaving the links area
document.querySelector('.links').addEventListener('mouseleave', () => slideToElement(defaultElement))
slideToElement(defaultElement); // setting the slide to the default position
body {
box-sizing: border-box;
font-family: sans-serif;
background-color: rgb(255, 238, 238);
}
nav {
position: relative;
margin: 0;
padding: 0;
box-shadow: 0 2px 3px 0;
width: 100%;
height: 50px;
background-color: #04111ffa;
line-height: 50px;
font-size: 15px;
padding: 0px 20px;
}
nav a {
width: 100%;
font-size: 15px;
color: seashell;
position: relative;
text-decoration: none;
text-transform: uppercase;
line-height: 50px;
z-index: 5;
text-align: center;
margin-left: 30px;
padding: 0 10px;
}
nav .animation {
position: absolute;
height: 50px;
top: 0;
z-index: 0;
width: 100px;
background-color: rgb(58, 233, 218);
border-radius: 10%;
transition: all 0.5s ease 0s;
}
a:nth-child(1) {
width: 150px;
left: 0;
}
input[type=text] {
padding: 6px;
margin-top: 13px;
font-size: 17px;
border: none;
border-radius: 15px;
}
.search-container button {
float: right;
padding: 6px 10px;
margin-top: 13px;
margin-right: 30px;
font-size: 17px;
border-radius: 15px;
background-color: rgb(58, 233, 218);
}
.search-container button:hover {
background-color: rgb(35, 168, 157);
}
.icon {
color: white;
z-index: 5;
}
.search-container {
float: right;
}
.links {
display: inline-block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
<link rel="stylesheet" href="navbar.css">
<title>Document</title>
</head>
<body>
<header>
<nav>
<div class="links">
<span class="icon fas fa-bars"></span>
Home
About
Contact
Privacy Policy
Sign-in
<div class="animation start-home"></div>
</div>
<div class="search-container">
<form>
<input type="text" placeholder="Search..." name="search" class="searchbar">
<button type="submit"><i class="fas fa-search"></i><span class="text">Search</span></button>
</form>
</div>
</nav>
</header>
</body>
</html>
This solution is made in JS, which made it possible to remove excess from CSS and not depend on pre-set CSS values.
I hope this can help somehow.
I want to hide the href link attachment to my browser link when I click on each href. For example, when I click on the href="dummy1" I don't want it to show mydomain.com/#dummy1. I want to hide the #dummy1 part. Hope this question makes sense.
Each hypertext scrolls down to a different part of my page.
Here is my CSS and HTML code
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
background: #000;
min-height: 200vh;
}
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
transition: 0.6s;
padding: 40px 100px;
z-index: 100000;
}
header .logo {
position: relative;
font-weight: 700;
color: #fff;
text-decoration: none;
font-size: 3em;
text-transform: uppercase;
letter-spacing: 2px;
transition: 0.6s;
}
header.sticky {
padding: 5px 100px;
background: #fff;
}
header ul {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
header ul li {
position: relative;
list-style: none;
}
header ul li a {
position: relative;
margin: 0 15px;
text-decoration: none;
color: #fff;
letter-spacing: 2px;
font-weight: 500px;
transition: 0.6s;
}
.banner {
position: relative;
width: 100%;
height: 100vh;
background: url(IMG-1022.jpg);
background-size: cover;
}
header.sticky .logo,
header.sticky ul li a {
color: #000;
}
#home {
padding-bottom: 500px;
background-color: aqua;
}
#aboutMe {
padding-bottom: 500px;
background-color: orange;
}
#portfolio {
padding-bottom: 500px;
background-color: yellow;
}
#contact {
padding-bottom: 1000px;
background-color: purple;
}
#wrapper {
padding-bottom: 50px;
}
#dummy1,
#dummy2,
#dummy3 {
margin-top: -65px;
}
#aboutMe,
#portfolio,
#contact {
margin-top: 65px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=chrome">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="indexStyle.css">
<link rel="shortcut icon" type="image/jpg" href="favicon.img"/>
<title>Document</title>
</head>
<body>
<header>
My Name
<ul>
<li class="page-scroll">About Me</li>
<li class="page-scroll">Portfolio</li>
<li class="page-scroll">Contact</li>
</ul>
</header>
<section class="banner"></section>
<script type="text/javascript">
window.addEventListener("scroll", function(){
var header = document.querySelector("header");
header.classList.toggle("sticky", window.scrollY > 100);
})
</script>
<div id="dummy1"></div>
<div id="aboutMe">This is the about me section</div>
<div id="dummy2"></div>
<div id="portfolio">This is the portfolio section</div>
<div id="dummy3"></div>
<div id="contact">This is the contact me section</div>
</body>
</html>
This can be achived by setting the href property to href="" and by attaching a onClick event to the <a> tag to redirect the link after clicking.
In the end, it should look like this:
Your text.
For this case you can use JavaScript. Bind your link to a clickevent and set the link target via JS and jump there. This way you can manipulate the link as you like.
function jump (target) {
window.location = '#' + target;
return false;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
background: #000;
min-height: 200vh;
}
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
transition: 0.6s;
padding: 40px 100px;
z-index: 100000;
}
header .logo {
position: relative;
font-weight: 700;
color: #fff;
text-decoration: none;
font-size: 3em;
text-transform: uppercase;
letter-spacing: 2px;
transition: 0.6s;
}
header.sticky {
padding: 5px 100px;
background: #fff;
}
header ul {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
header ul li {
position: relative;
list-style: none;
}
header ul li a {
position: relative;
margin: 0 15px;
text-decoration: none;
color: #fff;
letter-spacing: 2px;
font-weight: 500px;
transition: 0.6s;
}
.banner {
position: relative;
width: 100%;
height: 100vh;
background: url(IMG-1022.jpg);
background-size: cover;
}
header.sticky .logo,
header.sticky ul li a {
color: #000;
}
#home {
padding-bottom: 500px;
background-color: aqua;
}
#aboutMe {
padding-bottom: 500px;
background-color: orange;
}
#portfolio {
padding-bottom: 500px;
background-color: yellow;
}
#contact {
padding-bottom: 1000px;
background-color: purple;
}
#wrapper {
padding-bottom: 50px;
}
#dummy1,
#dummy2,
#dummy3 {
margin-top: -65px;
}
#aboutMe,
#portfolio,
#contact {
margin-top: 65px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=chrome">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="indexStyle.css">
<link rel="shortcut icon" type="image/jpg" href="favicon.img"/>
<title>Document</title>
</head>
<body>
<header>
My Name
<ul>
<li class="page-scroll"><a onclick="return jump( 'dummy1')" href="dummy1">About Me</a></li>
<li class="page-scroll"><a onclick="return jump( 'dummy2')" href="dummy2">Portfolio</a></li>
<li class="page-scroll"><a onclick="return jump( 'dummy1')" href="dummy3">Contact</a></li>
</ul>
</header>
<section class="banner"></section>
<script type="text/javascript">
window.addEventListener("scroll", function(){
var header = document.querySelector("header");
header.classList.toggle("sticky", window.scrollY > 100);
})
</script>
<div id="dummy1"></div>
<div id="aboutMe">This is the about me section</div>
<div id="dummy2"></div>
<div id="portfolio">This is the portfolio section</div>
<div id="dummy3"></div>
<div id="contact">This is the contact me section</div>
</body>
</html>
I'm a beginner in html and I want to learn. Three days ago I started my html journey and I'm running into a problem...
So, I created a 'dark-mode' theme on my page and it's working.
My problem is: when I click the Theme button, I want to change the search bar color and text and I don't know how to do it.
Basically when I click the Theme button to change theme to dark mode I want the search bar to change background color to #121212 and text color to white.
And when I re-click the Theme button and come back to light mode, to undo the things, but I can't figure out how.
Thank you in advance.
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<style>
body {
background-color: white;
color: #369497;
transition: 0.5s;
}
.dark-mode {
background-color: #121212;
color: white;
transition: 0.5s;
}
.button {
display: inline-block;
border-radius: 4px;
background-color: #369497;
border: none;
color: white;
text-align: center;
font-size: 18px;
padding: 12px;
width: 120px;
transition: all 0.5s;
cursor: pointer;
margin: 10px;
}
.button-pos {
margin: 0;
position: absolute;
bottom: 0%;
right: 0%;
transform: translate(-20%, -15%);
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.button:hover span {
padding-right: 25px;
}
.button:hover span:after {
opacity: 1;
right: 0;
}
input[type=text] {
width: 480px;
box-sizing: border-box;
border: 2px solid #369497;
border-radius: 4px;
font-size: 16px;
background-color: white;
padding: 12px 20px 12px 10px;
}
.searchbar-pos {
margin: 0;
position: absolute;
top: 25%;
left: 25%;
}
</style>
</head>
<body>
<div class="bgimg w3-display-container w3-animate-opacity">
<div class="w3-display-topmiddle">
<img src="logo" alt="logo">
</div>
</div>
<div class="bgimg w3-display-container w3-animate-opacity">
<div class="w3-display-topleft w3-padding-large w3-xlarge">
Logo
</div>
</div>
<script>
function myFunction() {
var element = document.body;
element.classList.toggle("dark-mode");
}
</script>
<div class="w3-animate-opacity">
<div class="button-pos">
<button onclick="myFunction()" class="button" style="vertical-align:middle"><span>Theme </span></button>
</div>
</div>
<div class="searchbar-pos">
<form>
<input type="text" name="search" placeholder="Search...">
</form>
</div>
</body>
</html>
You have to write a css rule for that, basically something that overrides the input styling when there's a parent element with dark-mode class applied (body in this case).
All you need is ti add this to your css:
.dark-mode input[type=text] {
background-color: #121212;
color: white;
}
Here's your code with that change:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<style>
body {
background-color: white;
color: #369497;
transition: 0.5s;
}
.dark-mode {
background-color: #121212;
color: white;
transition: 0.5s;
}
.button {
display: inline-block;
border-radius: 4px;
background-color: #369497;
border: none;
color: white;
text-align: center;
font-size: 18px;
padding: 12px;
width: 120px;
transition: all 0.5s;
cursor: pointer;
margin: 10px;
}
.button-pos {
margin: 0;
position: absolute;
bottom: 0%;
right: 0%;
transform: translate(-20%, -15%);
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.button:hover span {
padding-right: 25px;
}
.button:hover span:after {
opacity: 1;
right: 0;
}
input[type=text] {
width: 480px;
box-sizing: border-box;
border: 2px solid #369497;
border-radius: 4px;
font-size: 16px;
background-color: white;
padding: 12px 20px 12px 10px;
}
.dark-mode input[type=text] {
background-color: #121212;
color: white;
}
.searchbar-pos {
margin: 0;
position: absolute;
top: 25%;
left: 25%;
}
</style>
</head>
<body>
<div class="bgimg w3-display-container w3-animate-opacity">
<div class="w3-display-topmiddle">
<img src="logo" alt="logo">
</div>
</div>
<div class="bgimg w3-display-container w3-animate-opacity">
<div class="w3-display-topleft w3-padding-large w3-xlarge">
Logo
</div>
</div>
<script>
function myFunction() {
var element = document.body;
element.classList.toggle("dark-mode");
}
</script>
<div class="w3-animate-opacity">
<div class="button-pos">
<button onclick="myFunction()" class="button" style="vertical-align:middle"><span>Theme </span></button>
</div>
</div>
<div class="searchbar-pos">
<form>
<input type="text" name="search" placeholder="Search...">
</form>
</div>
</body>
</html>
I am trying to use a label to toggle a checkmark. When you press the label the checkmark is checked but when you press another part of the page the checkmark is also checked which isn't my intention.
I don't really get why this is the case. Can you explain it and explain how to fix it?
header {
height: 100vh;
background-size: cover;
background-position: center;
margin-bottom: 50px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
text-transform: uppercase;
color: black;
}
h1 {
font-size: 50px;
letter-spacing: 8px;
}
ul {
list-style-type: none;
margin-left: 0px;
padding-left: 0px;
}
p {
width: 600px;
margin: 0 auto 20px;
}
body {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px
}
.container {
margin: auto;
width: 80%;
}
.page-content {
position: relative;
z-index: 0;
transition-duration: 0.4s;
}
.sidebar {
position: fixed;
top: 0px;
left: -180px;
right: 0;
bottom: 0px;
width: 120px;
padding: 30px;
background-color: black;
z-index: 0;
width: 120px;
transition-duration: 0.4s;
}
.sidebar a {
text-decoration: none;
opacity: 0.8;
font-family: monospace;
font-size: 25px;
}
.sidebar li {
margin-bottom: 15px;
}
.sidebar a:hover {
opacity: 1;
}
.toggle {
position: fixed;
top: 20px;
right: 0;
bottom: 0;
left: 20px;
z-index: 1;
color: black;
transition-duration: 0.4s;
}
#sidebartoggler:checked + .page-wrap .sidebar {
left: 0px;
}
#sidebartoggler:checked + .page-wrap .toggle {
left: 200px;
}
#sidebartoggler:checked + .page-wrap .page-content {
padding-left: 180px;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="A page about me">
<meta name="keywords" content="web developer, projects">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hello</title>
<!-- own style sheet -->
<link rel="stylesheet" href="/static/css/style.css">
<!-- favicon -->
<link rel='icon' href="/static/assets/favicon.ico">
<!-- google icons -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- the icon font -->
<link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet">
</head>
<body>
<input type="checkbox" id="sidebartoggler" name="" value="">
<div class="page-wrap">
<label for="sidebartoggler"><i class="material-icons md-36 toggle">menu</i>
</label>
<div class="page-content">
<header>
<h1>title</h1>
</header>
</div>
<div class="sidebar">
<ul>
<li>home
</li>
<li>shoutbox
</li>
<li>resume
</li>
<li>projects
</li>
</ul>
</div>
</div>
</body>
</html>
Remove .toggle { right: 0; bottom: 0; }