HTML CSS中的自定义复选框和标签重叠_Html_Css

HTML CSS中的自定义复选框和标签重叠

html css

HTML CSS中的自定义复选框和标签重叠,html,css,Html,Css,我正在尝试用HTML制作一个审查表单，我创建了这个自定义复选框一切正常，当我将鼠标悬停在它上面时它会改变颜色，但标签文本与复选框重叠，我试图找到它，但仍然没有线索。这是代码 /*复选框css从这里开始*/ .exp{ 宽度：30px；位置：相对位置；保证金：20px自动； } .exp>标签{ 光标：指针；位置：绝对位置；显示：块；文本对齐：右对齐；字体系列：“Lucida控制台”；宽度：20px；高度：20px；背景：rgb（128204255）；边框：3倍实心rgb（

我正在尝试用HTML制作一个审查表单，我创建了这个自定义复选框一切正常，当我将鼠标悬停在它上面时它会改变颜色，但标签文本与复选框重叠，我试图找到它，但仍然没有线索。这是代码

/*复选框css从这里开始*/
.exp{
宽度：30px；
位置：相对位置；
保证金：20px自动；
}
.exp>标签{
光标：指针；
位置：绝对位置；
显示：块；
文本对齐：右对齐；
字体系列：“Lucida控制台”；
宽度：20px；
高度：20px；
背景：rgb（128204255）；
边框：3倍实心rgb（32,33,37）；
}
.exp>输入{
可见性：隐藏；
}
.exp>label:：after{
不透明度：0.2；
内容：''；
位置：绝对位置；
宽度：9px；
高度：5px；
背景：透明；
顶部：6px；
左：5px；
边框：3倍实心rgb（5,16,51）；
边界顶部：无；
边界权：无；
变换：旋转（-45度）；
}
.exp>标签：悬停：：之后{
不透明度：0.5；
}
.exp>输入：选中~label:：after{
不透明度：1；
}


乐趣
娱乐的
查兰陵
有益健康
其他

将复选框标签包装在

标签内

这是一把小提琴


乐趣
娱乐的
查兰陵
有益健康
其他
/*复选框css从这里开始*/
.exp{
宽度：30px；
位置：相对位置；
保证金：20px自动；
}
.exp>标签{
光标：指针；
位置：绝对位置；
显示：块；
文本对齐：右对齐；
字体系列：“Lucida控制台”；
宽度：20px；
高度：20px；
背景：rgb（128204255）；
边框：3倍实心rgb（32,33,37）；
}
.exp>输入{
可见性：隐藏；
}
.exp>label:：after{
不透明度：0.2；
内容：''；
位置：绝对位置；
宽度：9px；
高度：5px；
背景：透明；
顶部：6px；
左：5px；
边框：3倍实心rgb（5,16,51）；
边界顶部：无；
边界权：无；
变换：旋转（-45度）；
}
.exp>标签：悬停：：之后{
不透明度：0.5；
}
.exp>输入：选中~label:：after{
不透明度：1；
}
.标签跨度{
左边距：30px；
}

将复选框标签包装在

标签内

这是一把小提琴


乐趣
娱乐的
查兰陵
有益健康
其他
/*复选框css从这里开始*/
.exp{
宽度：30px；
位置：相对位置；
保证金：20px自动；
}
.exp>标签{
光标：指针；
位置：绝对位置；
显示：块；
文本对齐：右对齐；
字体系列：“Lucida控制台”；
宽度：20px；
高度：20px；
背景：rgb（128204255）；
边框：3倍实心rgb（32,33,37）；
}
.exp>输入{
可见性：隐藏；
}
.exp>label:：after{
不透明度：0.2；
内容：''；
位置：绝对位置；
宽度：9px；
高度：5px；
背景：透明；
顶部：6px；
左：5px；
边框：3倍实心rgb（5,16,51）；
边界顶部：无；
边界权：无；
变换：旋转（-45度）；
}
.exp>标签：悬停：：之后{
不透明度：0.5；
}
.exp>输入：选中~label:：after{
不透明度：1；
}
.标签跨度{
左边距：30px；
}

只需在标签文本中加上一个span并加上一个空格即可

请参阅下面的代码

/*复选框css从这里开始*/
.exp{
宽度：30px；
位置：相对位置；
保证金：20px自动；
}
.exp>标签{
光标：指针；
位置：绝对位置；
显示：块；
文本对齐：右对齐；
字体系列：“Lucida控制台”；
宽度：20px；
高度：20px；
背景：rgb（128204255）；
边框：3倍实心rgb（32,33,37）；
}
.exp>输入{
可见性：隐藏；
}
.exp>label:：after{
不透明度：0.2；
内容：''；
位置：绝对位置；
宽度：9px；
高度：5px；
背景：透明；
顶部：6px；
左：5px；
边框：3倍实心rgb（5,16,51）；
边界顶部：无；
边界权：无；
变换：旋转（-45度）；
}
.exp>标签：悬停：：之后{
不透明度：0.5；
}
.exp>输入：选中~label:：after{
不透明度：1；
}
.标签文本{
左侧填充：25px；
}


乐趣

只需在标签文本中加上一个span并加上一个空格即可

请参阅下面的代码

/*复选框css从这里开始*/
.exp{
宽度：30px；
位置：相对位置；
保证金：20px自动；
}
.exp>标签{
光标：指针；
位置：绝对位置；
显示：块；
文本对齐：右对齐；
字体系列：“Lucida控制台”；
宽度：20px；
高度：20px；
背景：rgb（128204255）；
边框：3倍实心rgb（32,33,37）；
}
.exp>输入{
可见性：隐藏；
}
.exp>label:：after{
不透明度：0.2；
内容：''；
位置：绝对位置；
宽度：9px；
高度：5px；
背景：透明；
顶部：6px；
左：5px；
边框：3倍实心rgb（5,16,51）；
边界顶部：无；
边界权：无；
变换：旋转（-45度）；
}
.exp>标签：悬停：：之后{
不透明度：0.5；
}
.exp>输入：选中~label:：after{
不透明度：1；
}
.标签文本{
左侧填充：25px；
}


乐趣

您已将

样式设置为复选框。文本位于视觉上看起来像复选框的

内

您可以使用

文本缩进

将文本向右移动，如下所示

.exp{
宽度：30px；
位置：相对位置；
保证金：20px自动；
}
.exp>标签{
光标：指针；
位置：绝对位置；
显示：块；
   <div class="exp">
                <input type="checkbox" name="fun" id="fun" />
                <label for="fun"><span class="label-span">Fun</span></label>
           </div>
           <div class="exp">
                <input type="checkbox" name="entertaining" id="entertaining" />
                <label for="entertaining"><span class="label-span">Entertaining</span></label>
           </div>
           <div class="exp">
                <input type="checkbox" name="challanging" id="challanging" />
                <label for="challanging"><span class="label-span">Challanging</span></label>
           </div>
           <div class="exp">
                <input type="checkbox" name="wholesome" id="wholesome" />
                <label for="wholesome"><span class="label-span">Wholesome</span></label>
           </div>
           <div class="exp">
                <input type="checkbox" name="other" id="other" />
                <label for="other"><span class="label-span">Other</span></label>
           </div>

/* checkbox css starts here */
.exp{
    width: 30px;
    position: relative;
    margin: 20px auto;
    
}
.exp > label {
    cursor: pointer;
    position: absolute;
    display: block;
    text-align: right;
    font-family: "Lucida Console";
    width: 20px;
    height: 20px;
    background: rgb(128, 204, 255);
    border: 3px solid rgb(32, 33, 37);
}
.exp > input {
    visibility: hidden;
}
.exp > label::after{
    opacity: 0.2;
    content: '';
    position: absolute;
    width: 9px;
    height: 5px;
    background: transparent;
    top: 6px;
    left: 5px;
    border: 3px solid rgb(5, 16, 51);
    border-top: none;
    border-right: none;
    transform: rotate(-45deg);
}
.exp > label:hover::after{
    opacity: 0.5;
}
.exp > input:checked ~ label::after{
    opacity: 1;
}

.label-span {
  margin-left: 30px;
}

<div class="exp">
                <input type="checkbox" name="fun" id="fun" />
                <span class="cbox"></span>
                <label for="fun">Fun</label>
           </div>
           <div class="exp">
                <input type="checkbox" name="entertaining" id="entertaining" />
                <span class="cbox"></span>
                <label for="entertaining">Entertaining</label>
           </div>
           <div class="exp">
                <input type="checkbox" name="challanging" id="challanging" />
                <span class="cbox"></span>
                <label for="challanging">Challanging</label>
           </div>
           <div class="exp">
                <input type="checkbox" name="wholesome" id="wholesome" />
                <span class="cbox"></span>
                <label for="wholesome">Wholesome</label>
           </div>
           <div class="exp">
                <input type="checkbox" name="other" id="other" />
                <span class="cbox"></span>
                <label for="other">Other</label>
           </div>

/* checkbox css starts here */
.exp{
    width: 30px;
    position: relative;
    margin: 20px auto;
    
}
.exp > label {
    cursor: pointer;
    position: relative;
    display: block;
    text-align: left;
    margin: -10px 2em;
    font-family: "Lucida Console";
}
.cbox{
    width: 20px;
    height: 20px;
    margin: -10px 0px;
    position: absolute;
    display: block;
    background: rgb(128, 204, 255);
    border: 3px solid rgb(32, 33, 37);
}
.exp > input {
    visibility: hidden;
}
.exp > .cbox::after{
    opacity: 0;
    content: '';
    position: absolute;
    width: 10px;
    height: 4px;
    background: transparent;
    top: 6px;
    left: 4px;
    border: 3px solid black;
    border-top: none;
    border-right: none;
    transform: rotate(-45deg);
}
.exp:hover .cbox::after {
    opacity: 0.5;
}
.exp > input:checked ~ .cbox::after{
    opacity: 1;
}