猿问

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

使用 Switch/Toggle Css/javascript 更改文本颜色

感谢您阅读这个问题

  • 实际上，我正在尝试为学生和教师创建一个登录表单

  • 教师和学生文本之间有切换/切换按钮的地方

  • 当开关切换到相应的（老师/学生）时，我想更改文本的颜色（比方说从绿色变为灰色）

  • 例如，如果我按下开关并且切换球向右筛选意味着学生文本将是灰色的，而另一侧的文本也是如此


慕码人2483693
浏览 267回答 3
3回答

青春有我

如果您能够修改您的 HTML，那么这个纯 CSS 解决方案也是可能的：/* CSS Additions *//* Checkbox does not need to be displayed */input {&nbsp; display: none;}/* Color labels green by default */.role-selector input+span {&nbsp; color: green;}.role-selector input+*+*+span {&nbsp; color: grey;}/* Color labels when input is checked */.role-selector input:checked+span {&nbsp; color: grey;}.role-selector input:checked+*+*+span {&nbsp; color: green;}/* --- */.form-container {&nbsp; text-align: center;&nbsp; border-radius: 5px;&nbsp; background-color: #f6f6f6;&nbsp; padding: 30px 10px 30px 10px;&nbsp; margin: 0% 5% 0% 5%;&nbsp; font-family: 'Poppins', sans-serif;&nbsp; font-weight: 700;&nbsp; font-size: 30px;&nbsp; color: green;&nbsp; -webkit-box-shadow: 5px 5px 5px -1px rgba(0, 0, 0, 0.41);&nbsp; -moz-box-shadow: 5px 5px 5px -1px rgba(0, 0, 0, 0.41);&nbsp; box-shadow: 5px 5px 5px -1px rgba(0, 0, 0, 0.41);}.input-design {&nbsp; margin: 0% 15% 0% 15%;&nbsp; margin-top: 50px;}.input-design input[type=text] {&nbsp; height: 50px;&nbsp; width: 100%;&nbsp; padding: 0px 0px 0px 10px;&nbsp; font-size: 20px;&nbsp; margin-bottom: 20px;}.input-design input[type=password] {&nbsp; height: 50px;&nbsp; width: 100%;&nbsp; padding: 0px 0px 0px 10px;&nbsp; font-size: 20px;}.button-design {&nbsp; padding: 15px 0px 0px 0px;&nbsp; height: 50px;&nbsp; font-weight: 600;&nbsp; font-size: 20px;&nbsp; margin: 5% 15% 5% 15%;&nbsp; background-color: green;&nbsp; color: white;&nbsp; border: 1px solid white;}.button-design:hover {&nbsp; border: 1px solid green;&nbsp; background-color: white;&nbsp; color: green;}.switch {&nbsp; position: relative;&nbsp; display: inline-block;&nbsp; width: 60px;&nbsp; height: 34px;}/*Remove:.switch input {&nbsp;&nbsp; opacity: 0;&nbsp; width: 0;&nbsp; height: 0;}*/.slider {&nbsp; position: absolute;&nbsp; cursor: pointer;&nbsp; top: 0;&nbsp; left: 0;&nbsp; right: 0;&nbsp; bottom: 0;&nbsp; background-color: #ccc;&nbsp; -webkit-transition: .4s;&nbsp; transition: .4s;}.slider:before {&nbsp; position: absolute;&nbsp; content: "";&nbsp; height: 26px;&nbsp; width: 26px;&nbsp; left: 4px;&nbsp; bottom: 4px;&nbsp; background-color: white;&nbsp; -webkit-transition: .4s;&nbsp; transition: .4s;}input:checked+span+.switch .slider {&nbsp; background-color: #2196F3;}input:focus+span+.switch .slider {&nbsp; box-shadow: 0 0 1px #2196F3;}input:checked+span+.switch .slider:before {&nbsp; -webkit-transform: translateX(26px);&nbsp; -ms-transform: translateX(26px);&nbsp; transform: translateX(26px);}/* Rounded sliders */.slider.round {&nbsp; border-radius: 34px;}.slider.round:before {&nbsp; border-radius: 50%;}<body>&nbsp; <div class="form-container">&nbsp; &nbsp; <div class="role-selector">&nbsp; &nbsp; &nbsp; <!-- Move input outside of .switch label -->&nbsp; &nbsp; &nbsp; <input type="checkbox" checked id="role-checkbox">&nbsp; &nbsp; &nbsp; <span>Teacher</span>&nbsp; &nbsp; &nbsp; <!-- Add for attribute that matches id of check input -->&nbsp; &nbsp; &nbsp; <label class="switch" for="role-checkbox">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="slider round"></span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </label>&nbsp; &nbsp; &nbsp; <span>Student</span>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="input-design">&nbsp; &nbsp; &nbsp; <input type="text" name="username" placeholder="Username">&nbsp; &nbsp; &nbsp; <input type="password" name="password" placeholder="Password">&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="button-design">&nbsp; &nbsp; &nbsp; Login&nbsp; &nbsp; </div>&nbsp; </div></body>
0

慕的地6264312

使用前后元素而不是文本。更新了 css 代码底部的 css。不需要jquery。.form-container{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text-align: center;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border-radius: 5px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-color: #f6f6f6;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; padding: 30px 10px 30px 10px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin: 0% 5% 0% 5%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; font-family: 'Poppins', sans-serif;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; font-weight: 700;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; font-size: 30px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color: green;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; -webkit-box-shadow: 5px 5px 5px -1px rgba(0,0,0,0.41);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; -moz-box-shadow: 5px 5px 5px -1px rgba(0,0,0,0.41);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; box-shadow: 5px 5px 5px -1px rgba(0,0,0,0.41);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .input-design{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin: 0% 15% 0% 15%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin-top: 50px;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .input-design input[type=text]{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 50px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 100%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; padding: 0px 0px 0px 10px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; font-size: 20px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin-bottom: 20px;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .input-design input[type=password]{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 50px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 100%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; padding: 0px 0px 0px 10px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; font-size: 20px;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .button-design{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; padding: 15px 0px 0px 0px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 50px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; font-weight: 600;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; font-size: 20px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin: 5% 15% 5% 15%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-color: green;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color: white;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border:1px solid white;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .button-design:hover{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border:1px solid green;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-color: white;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color: green;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .switch {&nbsp; position: relative;&nbsp; display: inline-block;&nbsp; width: 60px;&nbsp; height: 34px;}.slider {&nbsp; position: absolute;&nbsp; cursor: pointer;&nbsp; top: 0;&nbsp; left: 0;&nbsp; right: 0;&nbsp; bottom: 0;&nbsp; background-color: #ccc;&nbsp; -webkit-transition: .4s;&nbsp; transition: .4s;}.slider:before {&nbsp; position: absolute;&nbsp; content: "";&nbsp; height: 26px;&nbsp; width: 26px;&nbsp; left: 4px;&nbsp; bottom: 4px;&nbsp; background-color: white;&nbsp; -webkit-transition: .4s;&nbsp; transition: .4s;}input:checked + .slider {&nbsp; background-color: #2196F3;}input:focus + .slider {&nbsp; box-shadow: 0 0 1px #2196F3;}input:checked + .slider:before {&nbsp; -webkit-transform: translateX(26px);&nbsp; -ms-transform: translateX(26px);&nbsp; transform: translateX(26px);}/* Rounded sliders */.slider.round {&nbsp; border-radius: 34px;}.slider.round:before {&nbsp; border-radius: 50%;}/* Input must be visible for before and after elements. Relative used for absolute position of children */.switch input {&nbsp; position: relative;}/* Set text on before and after elements */input::before,input::after {&nbsp; font-family: 'Poppins', sans-serif;&nbsp; font-weight: 700;&nbsp; font-size: 30px;}input::before {&nbsp; position: absolute;&nbsp; left: 50px;&nbsp; bottom: 0;&nbsp; content: 'student';}input::after {&nbsp; position: absolute;&nbsp; right: 50px;&nbsp; bottom: 0;&nbsp; content: 'teacher';}/* Change colors based on checked status */input:checked::before {&nbsp; color: green;}input:checked::after {&nbsp; color: grey;}input:not(:checked)::before {&nbsp; color: grey;}input:not(:checked)::after {&nbsp; color: green;}<body>&nbsp; &nbsp; &nbsp; &nbsp; <div class="form-container">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="role-selector">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label class="switch">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="checkbox">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="slider round"></span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="input-design">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="text" name="username" placeholder="Username">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="password" name="password" placeholder="Password">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="button-design">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Login&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </body>
0
打开App，查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript