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

时间：2021-04-03 08:08:09

标签： html css

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

/* 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;
}
<div class="exp">
  <input type="checkbox" name="fun" id="fun" />
  <label for="fun">Fun</label>
</div>
<div class="exp">
  <input type="checkbox" name="entertaining" id="entertaining" />
  <label for="entertaining">Entertaining</label>
</div>
<div class="exp">
  <input type="checkbox" name="challanging" id="challanging" />
  <label for="challanging">Challanging</label>
</div>
<div class="exp">
  <input type="checkbox" name="wholesome" id="wholesome" />
  <label for="wholesome">Wholesome</label>
</div>
<div class="exp">
  <input type="checkbox" name="other" id="other" />
  <label for="other">Other</label>
</div>

O/P： Overlapping

请帮忙！

4 个答案:

答案 0 :(得分：2)

您已将 <label> 样式设置为复选框。文本位于 <label> 内，看起来像一个复选框。

您可以使用 text-indent 将文本向右移动，如下所示

.exp{
    width: 30px;
    position: relative;
    margin: 20px auto;
    
}
.exp > label {
    cursor: pointer;
    position: absolute;
    display: block;
    text-align: right;
    text-indent: 30px;
    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;
}
           <div class="exp">
                <input type="checkbox" name="fun" id="fun" />
                <label for="fun">Fun</label>
           </div>
           <div class="exp">
                <input type="checkbox" name="entertaining" id="entertaining" />
                <label for="entertaining">Entertaining</label>
           </div>
           <div class="exp">
                <input type="checkbox" name="challanging" id="challanging" />
                <label for="challanging">Challanging</label>
           </div>
           <div class="exp">
                <input type="checkbox" name="wholesome" id="wholesome" />
                <label for="wholesome">Wholesome</label>
           </div>
           <div class="exp">
                <input type="checkbox" name="other" id="other" />
                <label for="other">Other</label>
           </div>

答案 1 :(得分：0)

将复选框标签包裹在 <span> 标签内。

这是一个有效的小提琴 https://jsfiddle.net/0jwcrxzm/

   <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;
}

答案 2 :(得分：0)

只需用 span 包裹标签文本并给它一个填充

见下面的代码

/* 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-text {
  padding-left: 25px;
}
<div class="exp">
    <input type="checkbox" name="fun" id="fun" />
    <span class="cbox"></span>
    <label for="fun">
       <span class="label-text">Fun</span>
    </label>
</div>

答案 3 :(得分：0)

这是我几次尝试后所做的，我为自定义复选框创建了一个单独的跨度，然后很容易将标签和自定义复选框分开。

HTML

<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>

CSS

/* 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;
}
相关问题
最新问题