切换按钮与复选框的位置。

huangapple
go评论93阅读模式
英文:

Toggle the position of a button with checkbox

问题

这个问题出现在尝试在网站中创建主题切换方案时，当我点击复选框时，X轴位置的翻译移动不会发生。

  1. .alt-theme {
  2.   height: 80vh;
  3.   position: absolute;
  4.   right: 10em;
  5. }
  7. .checkbox {
  8.   opacity: 1;
  9.   position: absolute;
  10. }
  12. .checkbox-label {
  13.   background-color: #111;
  14.   border-radius: 50px;
  15.   cursor: pointer;
  16.   
  17.   display: flex;
  18.   align-items: center;
  19.   justify-content: space-between;
  20.   position: relative;
  21.   height: 26px;
  22.   width: 50px;
  23.   
  24.   transform: scale(1.5);
  25. }
  27. .checkbox-label .ball {
  28.   background-color: #fff;
  29.   border-radius: 50%;
  30.   position: absolute;
  31.   top: 2px;
  32.   left: 2px;
  33.   height: 22px;
  34.   width: 22px;
  35.   transform: translateX(0);
  36.   transition: transform 0.2s linear;
  37. }
  1. <div class="alt-theme">
  2.   <label for="checkbox" class="checkbox-label">
  3.     <i class="fa-solid fas fa-moon" style="color: #000; background: none;"></i>
  4.     <i class="fa-solid fas fa-sun" style="color: #000; background: none;"></i>
  5.     <div class="ball"></div>
  6.   </label>
  7.   
  8.   <input type="checkbox" class="checkbox" />
  9. </div>

这个复选框标签内的白色球的移动。

英文:

This problem appears while trying to make a theme switcher scheme within a website when I click on the checkbox the translation movement in the X position doesn´t happen.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. .alt-theme {
  2.   height: 80vh;
  3.   position: absolute;
  4.   right: 10em;
  5. }
  7. .checkbox {
  8.   opacity: 1;
  9.   position: absolute;
  10. }
  12. .checkbox-label {
  13.   background-color: #111;
  14.   border-radius: 50px;
  15.   cursor: pointer;
  16.   
  17.   display: flex;
  18.   align-items: center;
  19.   justify-content: space-between;
  20.   position: relative;
  21.   height: 26px;
  22.   width: 50px;
  23.   
  24.   transform: scale(1.5);
  25. }
  27. .checkbox-label .ball {
  28.   background-color: #fff;
  29.   border-radius: 50%;
  30.   position: absolute;
  31.   top: 2px;
  32.   left: 2px;
  33.   height: 22px;
  34.   width: 22px;
  35.   transform: translateX(0);
  36.   transition: transform 0.2s linear;
  37. }

<!-- language: lang-html -->

  1. &lt;div class=&quot;alt-theme&quot;&gt;
  2.   &lt;label for=&quot;checkbox&quot; class=&quot;checkbox-label&quot;&gt;
  3.     &lt;i class=&quot;fa-solid fas fa-moon&quot; style=&quot;color: #000; background: none;&quot; /&gt;
  4.     &lt;i class=&quot;fa-solid fas fa-sun&quot; style=&quot;color: #000; background: none;&quot; /&gt;
  5.     &lt;div class=&quot;ball&quot; /&gt;
  6.   &lt;/label&gt;
  7.   
  8.   &lt;input type=&quot;checkbox&quot; class=&quot;checkbox&quot; /&gt;
  9. &lt;/div&gt;

<!-- end snippet -->

The movement of this white ball inside the label of the checkbox.

切换按钮与复选框的位置。

答案1

得分: 1

以下是您要翻译的内容：

您采取的方法并不差，但还有改进的空间。请仔细阅读添加到代码中的注释，以更好地理解底层原理。

解决方案

  1. <!-- 开始代码片段：js 隐藏：false 控制台：true Babel：false -->
  3. <!-- 语言：lang-css -->
  4. /* 仅设置开关元素的位置 */
  5. .switch {
  6.   position: relative;
  7.   display: inline-block;
  8.   width: 60px;
  9.   height: 34px;
  10. }
  12. /* 隐藏输入元素 --&gt; 这样你就看不到复选框的方框了 */
  13. .switch input {
  14.   display: none;
  15. }
  17. /* 设置背景 */
  18. .slider {
  19.   position: absolute;
  20.   top: 0;
  21.   left: 0;
  22.   right: 0;
  23.   bottom: 0;
  24.   background-color: #555;
  25.   transition: 0.4s;
  26.   cursor: pointer;
  27.   border-radius: 34px;
  28. }
  30. /* 设置圆圈 */
  31. .slider:before {
  32.   position: absolute;
  33.   width: 26px;
  34.   height: 26px;
  35.   left: 4px;
  36.   bottom: 4px;
  37.   background-color: #fff;
  38.   transition: 0.4s;
  39.   border-radius: 34px;
  41.   /* 当复选框的值为假时设置图标 */
  42.   font-family: "Font Awesome 5 Free";
  43.   content: "\f186"; /* Font Awesome fas-moon */
  44.   font-weight: 900;
  45.   font-size: 15px;
  46.   display: flex;
  47.   align-items: center;
  48.   justify-content: center;
  49. }
  51. /* 复选框的值为真时设置背景 */
  52. .switch input:checked + .slider {
  53.   background-color: #ccc;
  54. }
  56. /* 复选框的值为真时设置图标 */
  57. .switch input:checked + .slider:before {
  58.   content: "\f185"; /* Font Awesome fas-sun */
  59.   transform: translateX(26px);
  60. }
  62. <!-- 语言：lang-html -->
  64. <!-- 导入FontAwesome -->
  65. <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
  67. <!-- 开关输入 -->
  68. <label class="switch" for="checkbox">
  69.   <!-- 存储真/假值 -->
  70.   <input type="checkbox" id="checkbox" />
  71.   <!-- 显示带有月亮/太阳图标的圆圈 -->
  72.   <div class="slider round"></div>
  73. </label>
  75. <!-- 结束代码片段 -->

更多信息

英文:

The approach you've taken is not bad, but there is room for improvement. Please read through the comments added to the code to better understand the underlying principles.

Solution

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. /* Just sets position of the switch element */
  2. .switch {
  3.   position: relative;
  4.   display: inline-block;
  5.   width: 60px;
  6.   height: 34px;
  7. }
  9. /* Hide input element --&gt; You won&#39;t see the checkbox square like this */
  10. .switch input {
  11.   display: none;
  12. }
  14. /* Sets background */
  15. .slider {
  16.   position: absolute;
  17.   top: 0;
  18.   left: 0;
  19.   right: 0;
  20.   bottom: 0;
  21.   background-color: #555;
  22.   transition: 0.4s;
  23.   cursor: pointer;
  24.   border-radius: 34px;
  25. }
  27. /* Sets circle */
  28. .slider:before {
  29.   position: absolute;  
  30.   width: 26px;
  31.   height: 26px;
  32.   left: 4px;
  33.   bottom: 4px;
  34.   background-color: #fff;
  35.   transition: 0.4s;
  36.   border-radius: 34px;
  37.   
  38.   /* Sets icon when value of checkbox is false */
  39.   font-family: &quot;Font Awesome 5 Free&quot;;
  40.   content: &quot;\f186&quot;; /* Font Awesome fas-moon */
  41.   font-weight: 900;
  42.   font-size: 15px;
  43.   display: flex;
  44.   align-items: center;
  45.   justify-content: center;
  46. }
  48. /* Sets background when value of checkbox is TRUE */
  49. .switch input:checked + .slider {
  50.   background-color: #ccc;
  51. }
  53. /* Sets icon when value of checkbox is TRUE */
  54. .switch input:checked + .slider:before {
  55.   content: &quot;\f185&quot;; /* Font Awesome fas-sun */
  56.   transform: translateX(26px);
  57. }

<!-- language: lang-html -->

  1. &lt;!-- Import FontAwesome --&gt;
  2. &lt;link href=&quot;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css&quot; rel=&quot;stylesheet&quot;&gt;
  4. &lt;!-- Switch input --&gt;
  5. &lt;label class=&quot;switch&quot; for=&quot;checkbox&quot;&gt;
  6.   &lt;!-- Store true/false value --&gt;
  7.   &lt;input type=&quot;checkbox&quot; id=&quot;checkbox&quot; /&gt;
  8.   &lt;!-- Show circle with moon/sun icon --&gt;
  9.   &lt;div class=&quot;slider round&quot; /&gt;
  10. &lt;/label&gt;

<!-- end snippet -->

More information

huangapple
  • 本文由 发表于 2023年6月8日 22:46:57
  • 转载请务必保留本文链接：https://go.coder-hub.com/76433073.html
  • css
  • html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定