使用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.