1

我是 CSS 新手，并按照视频教程在 CSS 中创建自定义切换控件。现在，我想在旋钮上添加一个材质图标，但我很难理解最好的方法。

我尝试将 HTML 添加到旋钮本身的内容属性中，但后来了解到您不应该这样做。所以我找到了另一个例子，它显示了一个带有表情符号的旋钮，但它与我想要完成的不太一样。这是我到目前为止的代码：

:root{
    --scale: 1;
    --height: 50px;
    --width: 100px;
    --knob-diameter: 45px;
    --background-inactive: rgb(173, 173, 173);
    --background-active: rgb(65, 207, 65);
    --knob-color-inactive: rgb(78, 78, 78);
    --knob-color-active: rgb(78, 78, 78);
    --text-color-inactive: black;
    --text-color-active: white;
    --text-size: 1rem;
    --transition-speed: 0.15s;
}

body{
    background: #e5e5e5;
    height: 100vh
}

h1{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 3rem;
    text-align: center;
    margin: 50px 0;
}

.pwr-tog-container{
    position:relative;
    width: var(--width);
    height: var(--height);
    background: red;
}

.pwr-tog-icon{
    position: relative;
    top: 0;
    left: 0;
}

/* Toggle switch body */
.toggle{
    display: block;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: var(--width);
    height: var(--height);
    background: var(--background-inactive);
    /* box-shadow: inset 3px 3px rgb(0,0,0); */
    border-radius: calc(var(--height) / 2);
    position: relative;
    transform: scale(var(--scale));
    transition-property: background;
    transition-duration: var(--transition-speed);
}

/* Toggle switch knob */
.toggle:before{
    content: "";
    background: var(--knob-color-inactive);
    height: var(--knob-diameter);
    width: var(--knob-diameter);
    position: absolute;
    border-radius: 50%;
    top: calc((var(--height) - var(--knob-diameter)) / 2);
    left: calc((var(--height) - var(--knob-diameter)) / 2);
    transition: all var(--transition-speed);
    z-index: 2;
}

/* Toggle switch inactive text */
.toggle:after{
    content: "OFF";
    position: absolute;
    font-size: var(--text-size);
    color: var(--text-color-inactive);
    font-weight: bold;
    top: 50%;
    left: 50%;
    transform: translate(25%, -50%);
    z-index: 1;
}

/* Toggle cwitch checked state */
.toggle:checked{
    background: var(--background-active);
}

/* Toggle Switch Knob offset */
.toggle:checked::before{
    left: calc((var(--height) - var(--knob-diameter)) / 2 + var(--width) - var(--height));
}

.toggle:checked::after{
    content: "ON";
    left: 5%;
    color: var(--text-color-active);
}
<head>
    <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <h1>Toggle Switch</h1>
    <center>
        <div class=".pwr-tog-container">
            <input type="checkbox", class="toggle">
            <i class ="material-icons pwr-tog-icon">power_settings_new</i>
        </div>
    </center>
</body>

我为表情符号切换引用的网站是这个： https ://codepen.io/chriscoyier/pen/EVamGp

非常感谢任何帮助！

4

1 回答 1

1

我建议使用您已经为旋钮使用的伪元素，并为符号应用字体系列 unicode。请参阅下面对您的.toggle:before伪类的更改。干杯。

calc()PS - 如果你没有功能，额外的学分;）

:root{
    --scale: 1;
    --height: 50px;
    --width: 100px;
    --knob-diameter: 45px;
    --background-inactive: rgb(173, 173, 173);
    --background-active: rgb(65, 207, 65);
    --knob-color-inactive: rgb(78, 78, 78);
    --knob-color-active: rgb(78, 78, 78);
    --text-color-inactive: black;
    --text-color-active: white;
    --text-size: 1rem;
    --transition-speed: 0.15s;
}

body{
    background: #e5e5e5;
    height: 100vh
}

h1{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 3rem;
    text-align: center;
    margin: 50px 0;
}

.pwr-tog-container{
    position:relative;
    width: var(--width);
    height: var(--height);
    background: red;
}

.pwr-tog-icon{
    position: relative;
    top: 0;
    left: 0;
}

/* Toggle switch body */
.toggle{
    display: block;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: var(--width);
    height: var(--height);
    background: var(--background-inactive);
    /* box-shadow: inset 3px 3px rgb(0,0,0); */
    border-radius: calc(var(--height) / 2);
    position: relative;
    transform: scale(var(--scale));
    transition-property: background;
    transition-duration: var(--transition-speed);
}

/* Toggle switch knob */
.toggle:before{
    /* BEGIN NEW STUFF */
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Material Icons";
    content: "\e8ac";
    font-size: 2rem;
    color: #f00;
    transition: color .35s ease;
    /* END NEW STUFF */
    background: var(--knob-color-inactive);
    height: var(--knob-diameter);
    width: var(--knob-diameter);
    position: absolute;
    border-radius: 50%;
    top: calc((var(--height) - var(--knob-diameter)) / 2);
    left: calc((var(--height) - var(--knob-diameter)) / 2);
    transition: all var(--transition-speed);
    z-index: 2;
}

/* Toggle switch inactive text */
.toggle:after{
    content: "OFF";
    position: absolute;
    font-size: var(--text-size);
    color: var(--text-color-inactive);
    font-weight: bold;
    top: 50%;
    left: 50%;
    transform: translate(25%, -50%);
    z-index: 1;
}

/* Toggle cwitch checked state */
.toggle:checked{
    background: var(--background-active);
}

/* Toggle Switch Knob offset */
.toggle:checked::before{
    color: #0f0;
    left: calc((var(--height) - var(--knob-diameter)) / 2 + var(--width) - var(--height));
}

.toggle:checked::after{
    content: "ON";
    left: 5%;
    color: var(--text-color-active);
}
<head>
    <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <h1>Toggle Switch</h1>
    <center>
        <div class=".pwr-tog-container">
            <input type="checkbox", class="toggle">
            <i class ="material-icons pwr-tog-icon">power_settings_new</i>
        </div>
    </center>
</body>

于 2021-12-23T16:58:39.913 回答