使用Switch / Toggle CSS / javascript更改文本颜色
[英]Change Text Color with Switch/Toggle Css/javascript
问题描述
感谢您阅读此问题
- 实际上，我正在尝试为学生和老师创建一个登录表单
- 老师和学生之间有一个切换/切换按钮
- 当开关切换到相应位置（老师/学生）时，我想更改文本的颜色（从绿色变成灰色）
- 例如，如果我按下开关，切换球向右移动，则表示学生文本为灰色，而对面则相同
这是我的代码 index.html
.form-container{ text-align: center; border-radius: 5px; background-color: #f6f6f6; padding: 30px 10px 30px 10px; margin: 0% 5% 0% 5%; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 30px; color: green; -webkit-box-shadow: 5px 5px 5px -1px rgba(0,0,0,0.41); -moz-box-shadow: 5px 5px 5px -1px rgba(0,0,0,0.41); box-shadow: 5px 5px 5px -1px rgba(0,0,0,0.41); } .input-design{ margin: 0% 15% 0% 15%; margin-top: 50px; } .input-design input[type=text]{ height: 50px; width: 100%; padding: 0px 0px 0px 10px; font-size: 20px; margin-bottom: 20px; } .input-design input[type=password]{ height: 50px; width: 100%; padding: 0px 0px 0px 10px; font-size: 20px; } .button-design{ padding: 15px 0px 0px 0px; height: 50px; font-weight: 600; font-size: 20px; margin: 5% 15% 5% 15%; background-color: green; color: white; border:1px solid white; } .button-design:hover{ border:1px solid green; background-color: white; color: green; } .switch { position: relative; display: inline-block; width: 60px; height: 34px; } .switch input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -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: #2196F3; } input:focus + .slider { box-shadow: 0 0 1px #2196F3; } input:checked + .slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px); } /* Rounded sliders */ .slider.round { border-radius: 34px; } .slider.round:before { border-radius: 50%; }
<body> <div class="form-container"> <div class="role-selector"> Teacher <label class="switch"> <input type="checkbox"> <span class="slider round"></span> </label> Student </div> <div class="input-design"> <input type="text" name="username" placeholder="Username"> <input type="password" name="password" placeholder="Password"> </div> <div class="button-design"> Login </div> </div> </body>
4 个解决方案
解决方案1
0 2019-06-25 03:29:15
输入更改时，应切换父级div的类，然后使用该类名称设置颜色。
document.getElementById('switch').addEventListener('click', function(event) { event.target.parentElement.parentElement.classList.toggle('student'); });
.form-container{ text-align: center; border-radius: 5px; background-color: #f6f6f6; padding: 30px 10px 30px 10px; margin: 0% 5% 0% 5%; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 30px; color: green; -webkit-box-shadow: 5px 5px 5px -1px rgba(0,0,0,0.41); -moz-box-shadow: 5px 5px 5px -1px rgba(0,0,0,0.41); box-shadow: 5px 5px 5px -1px rgba(0,0,0,0.41); } .input-design{ margin: 0% 15% 0% 15%; margin-top: 50px; } .input-design input[type=text]{ height: 50px; width: 100%; padding: 0px 0px 0px 10px; font-size: 20px; margin-bottom: 20px; } .input-design input[type=password]{ height: 50px; width: 100%; padding: 0px 0px 0px 10px; font-size: 20px; } .button-design{ padding: 15px 0px 0px 0px; height: 50px; font-weight: 600; font-size: 20px; margin: 5% 15% 5% 15%; background-color: green; color: white; border:1px solid white; } .button-design:hover{ border:1px solid green; background-color: white; color: green; } .switch { position: relative; display: inline-block; width: 60px; height: 34px; } .switch input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -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: #2196F3; } input:focus + .slider { box-shadow: 0 0 1px #2196F3; } input:checked + .slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px); } /* Rounded sliders */ .slider.round { border-radius: 34px; } .slider.round:before { border-radius: 50%; } .role-selector { color: green; } .role-selector.student { color: grey; }
<body> <div class="form-container"> <div class="role-selector"> Teacher <label class="switch"> <input id="switch" type="checkbox"> <span class="slider round"></span> </label> Student </div> <div class="input-design"> <input type="text" name="username" placeholder="Username"> <input type="password" name="password" placeholder="Password"> </div> <div class="button-design"> Login </div> </div> </body>
解决方案2
0 2019-06-25 03:37:17
实际上，您可以在span元素内放置教师和学生一词，并为其指定一个ID。 并为输入开关分配一个ID，以在onclick event与js function绑定。
.form-container{ text-align: center; border-radius: 5px; background-color: #f6f6f6; padding: 30px 10px 30px 10px; margin: 0% 5% 0% 5%; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 30px; color: green; -webkit-box-shadow: 5px 5px 5px -1px rgba(0,0,0,0.41); -moz-box-shadow: 5px 5px 5px -1px rgba(0,0,0,0.41); box-shadow: 5px 5px 5px -1px rgba(0,0,0,0.41); } .input-design{ margin: 0% 15% 0% 15%; margin-top: 50px; } .input-design input[type=text]{ height: 50px; width: 100%; padding: 0px 0px 0px 10px; font-size: 20px; margin-bottom: 20px; } .input-design input[type=password]{ height: 50px; width: 100%; padding: 0px 0px 0px 10px; font-size: 20px; } .button-design{ padding: 15px 0px 0px 0px; height: 50px; font-weight: 600; font-size: 20px; margin: 5% 15% 5% 15%; background-color: green; color: white; border:1px solid white; } .button-design:hover{ border:1px solid green; background-color: white; color: green; } .switch { position: relative; display: inline-block; width: 60px; height: 34px; } .switch input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -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: #2196F3; } input:focus + .slider { box-shadow: 0 0 1px #2196F3; } input:checked + .slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px); } /* Rounded sliders */ .slider.round { border-radius: 34px; } .slider.round:before { border-radius: 50%; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <body> <div class="form-container"> <div class="role-selector"> <span class="" id="teacher">Teacher</span> <label class="switch"> <input type="checkbox" id="toggle" onclick="checkYesNo()"> <span class="slider round"></span> </label> <span class="" id="student">Student</span> </div> <div class="input-design"> <input type="text" name="username" placeholder="Username"> <input type="password" name="password" placeholder="Password"> </div> <div class="button-design"> Login </div> </div> </body> <script> function checkYesNo() { if (document.getElementById('toggle').checked) { document.getElementById('student').style.color = 'grey'; document.getElementById('teacher').style.color = 'green'; }else { document.getElementById('teacher').style.color = 'grey'; document.getElementById('student').style.color = 'green'; } } </script>
解决方案3
0 2019-06-25 03:49:23
利用前后元素代替文本。 在CSS代码底部更新了CSS。 不需要jQuery。
.form-container{ text-align: center; border-radius: 5px; background-color: #f6f6f6; padding: 30px 10px 30px 10px; margin: 0% 5% 0% 5%; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 30px; color: green; -webkit-box-shadow: 5px 5px 5px -1px rgba(0,0,0,0.41); -moz-box-shadow: 5px 5px 5px -1px rgba(0,0,0,0.41); box-shadow: 5px 5px 5px -1px rgba(0,0,0,0.41); } .input-design{ margin: 0% 15% 0% 15%; margin-top: 50px; } .input-design input[type=text]{ height: 50px; width: 100%; padding: 0px 0px 0px 10px; font-size: 20px; margin-bottom: 20px; } .input-design input[type=password]{ height: 50px; width: 100%; padding: 0px 0px 0px 10px; font-size: 20px; } .button-design{ padding: 15px 0px 0px 0px; height: 50px; font-weight: 600; font-size: 20px; margin: 5% 15% 5% 15%; background-color: green; color: white; border:1px solid white; } .button-design:hover{ border:1px solid green; background-color: white; color: green; } .switch { position: relative; display: inline-block; width: 60px; height: 34px; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -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: #2196F3; } input:focus + .slider { box-shadow: 0 0 1px #2196F3; } input:checked + .slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px); } /* Rounded sliders */ .slider.round { border-radius: 34px; } .slider.round:before { border-radius: 50%; } /* Input must be visible for before and after elements. Relative used for absolute position of children */ .switch input { position: relative; } /* Set text on before and after elements */ input::before, input::after { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 30px; } input::before { position: absolute; left: 50px; bottom: 0; content: 'student'; } input::after { position: absolute; right: 50px; bottom: 0; content: 'teacher'; } /* Change colors based on checked status */ input:checked::before { color: green; } input:checked::after { color: grey; } input:not(:checked)::before { color: grey; } input:not(:checked)::after { color: green; }
<body> <div class="form-container"> <div class="role-selector"> <label class="switch"> <input type="checkbox"> <span class="slider round"></span> </label> </div> <div class="input-design"> <input type="text" name="username" placeholder="Username"> <input type="password" name="password" placeholder="Password"> </div> <div class="button-design"> Login </div> </div> </body>
解决方案4
0 已采纳 2019-06-25 04:05:00
如果您能够修改HTML，那么仅CSS的解决方案也是可行的：
/* CSS Additions */ /* Checkbox does not need to be displayed */ input { display: none; } /* Color labels green by default */ .role-selector input+span { color: green; } .role-selector input+*+*+span { color: grey; } /* Color labels when input is checked */ .role-selector input:checked+span { color: grey; } .role-selector input:checked+*+*+span { color: green; } /* --- */ .form-container { text-align: center; border-radius: 5px; background-color: #f6f6f6; padding: 30px 10px 30px 10px; margin: 0% 5% 0% 5%; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 30px; color: green; -webkit-box-shadow: 5px 5px 5px -1px rgba(0, 0, 0, 0.41); -moz-box-shadow: 5px 5px 5px -1px rgba(0, 0, 0, 0.41); box-shadow: 5px 5px 5px -1px rgba(0, 0, 0, 0.41); } .input-design { margin: 0% 15% 0% 15%; margin-top: 50px; } .input-design input[type=text] { height: 50px; width: 100%; padding: 0px 0px 0px 10px; font-size: 20px; margin-bottom: 20px; } .input-design input[type=password] { height: 50px; width: 100%; padding: 0px 0px 0px 10px; font-size: 20px; } .button-design { padding: 15px 0px 0px 0px; height: 50px; font-weight: 600; font-size: 20px; margin: 5% 15% 5% 15%; background-color: green; color: white; border: 1px solid white; } .button-design:hover { border: 1px solid green; background-color: white; color: green; } .switch { position: relative; display: inline-block; width: 60px; height: 34px; } /* Remove: .switch input { opacity: 0; width: 0; height: 0; } */ .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -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+span+.switch .slider { background-color: #2196F3; } input:focus+span+.switch .slider { box-shadow: 0 0 1px #2196F3; } input:checked+span+.switch .slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px); } /* Rounded sliders */ .slider.round { border-radius: 34px; } .slider.round:before { border-radius: 50%; }
<body> <div class="form-container"> <div class="role-selector"> <!-- Move input outside of .switch label --> <input type="checkbox" checked id="role-checkbox"> <span>Teacher</span> <!-- Add for attribute that matches id of check input --> <label class="switch" for="role-checkbox"> <span class="slider round"></span> </label> <span>Student</span> </div> <div class="input-design"> <input type="text" name="username" placeholder="Username"> <input type="password" name="password" placeholder="Password"> </div> <div class="button-design"> Login </div> </div> </body>
使用Javascript切换文字颜色
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.