如何解决主题更改搜索栏
我是 html 的初学者,我想学习。三天前,我开始了我的 html 之旅,但遇到了一个问题...
所以,我在我的页面上创建了一个“黑暗模式”主题并且它正在运行。
我的问题是:当我点击主题按钮时,我想改变搜索栏的颜色和文字,但我不知道该怎么做。
基本上当我点击主题按钮将主题更改为暗模式时,我希望搜索栏将背景颜色更改为#121212
和文本颜色到white
。
当我重新单击 主题按钮 并返回浅色模式以撤消这些操作时,但我不知道如何操作。
提前致谢。
<!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>
解决方法
您必须为此编写一个 css 规则,当父元素应用了 input
类(在本例中为 dark-mode
)时,它基本上会覆盖 body
样式。
你所需要的只是把它添加到你的 css 中:
.dark-mode input[type=text] {
background-color: #121212;
color: white;
}
这是您的更改代码:
<!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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。