Change Text Color with Switch/Toggle Css/javascript
Question
Thank you for reading this question
- Actually, I am trying to create a login form for student and teachers
- Where there is a Switch/toggle button between Teacher and Student text
- I want to change the colour (let say to grey from green) of the text when the switch toggle to respective(teacher/student)
- For Example, if I pressed the switch and the toggle ball sift to right means the Student text will be grey and the same for the opposite side
Here is my code 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 answers
solution1
0 2019-06-25 03:29:15
You should toggle the class of parent's div when input is changed, and then set the color with that class name.
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>
solution2
0 2019-06-25 03:37:17
You can actually put the word Teacher and Student inside the span element and give it an Id. And assign an ID to input switch to bind with a js function in onclick event .
.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>
solution3
0 2019-06-25 03:49:23
Making use of before and after elements instead of text. Updated css at the bottom of css code. No jquery needed.
.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>
solution4
0 ACCPTED 2019-06-25 04:05:00
If you are able to revise your HTML, then this CSS-only solution is also possible:
/* 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Toggle Text Color with Javascript
Change tooltip text on toggle switch
How to change toggle switch with JavaScript
Jquery Toggle CSS Color Change
change text link color javascript or css
Change background color using toggle switch
Adjusting toggle switch in smooth transuction and color change
JavaScript: css toggle switch to dark mode
Change the text in a Flip toggle switch, jQuery Mobile
javascript change toggle button text
Related Tags