Bootstrap卡作为显示数据的按钮

问题描述 投票:0回答:2

我有一个自定义复选框,我添加了一个文本,我希望文本对齐复选框的右侧,

这是jsfiddle:qazxsw poi

这是HTML

https://jsfiddle.net/Mwanitete/ewpo0h1g/1/

这里是css

<div class="squaredThree">
  <input type="checkbox" name="optionsRadios" id="checkOther" value="other"  >
  <label for="checkOther">Testing Check-Box</label>
</div>

我的代码中缺少什么?任何建议都会有所帮助谢谢

html css html5 css3
2个回答
1
投票

将文本移动到标签字段之外,如下所示。

/* .squaredThree */
.squaredThree {
  position: relative;
  float:left;
  margin: 10px
}

.squaredThree label {
  width: 20px;
  height: 20px;
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
  background: #D7B1D7;
  border-radius: 4px; 
}

.squaredThree label:after {
  content: '';
  width: 9px;
  height: 5px;
  position: absolute;
  top: 4px;
  left: 4px;
  border: 3px solid #fcfff4;
  border-top: none;
  border-right: none;
  background: transparent;
  opacity: 0;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.squaredThree label:hover::after {
  opacity: 0.3;
}

.squaredThree input[type=checkbox] {
  visibility: hidden;
}

.squaredThree input[type=checkbox]:checked + label:after {
  opacity: 1;
}
/* end .squaredThree */

.label-text {
  position: relative;
  left: 10px;
}

<label for="checkOther"></label>Testing check-box
/* .squaredThree */
.squaredThree {
  position: relative;
  float:left;
  margin: 10px
}

.squaredThree label {
  width: 20px;
  height: 20px;
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
  background: #D7B1D7;
  border-radius: 4px; 
}

.squaredThree label:after {
  content: '';
  width: 9px;
  height: 5px;
  position: absolute;
  top: 4px;
  left: 4px;
  border: 3px solid #fcfff4;
  border-top: none;
  border-right: none;
  background: transparent;
  opacity: 0;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.squaredThree label:hover::after {
  opacity: 0.3;
}

.squaredThree input[type=checkbox] {
  visibility: hidden;
}

.squaredThree input[type=checkbox]:checked + label:after {
  opacity: 1;
}
/* end .squaredThree */

.label-text {
  position: relative;
  left: 10px;
}
 

解决方案2:您正在使用 <div class="squaredThree"> <input type="checkbox" name="optionsRadios" id="checkOther" value="other" > <label for="checkOther"></label>Testing check-box </div> 为复选框应用样式,但同样也适用于标签。因此,使用.squaredThree label:after属性为复选框标签应用样式,如下所示。但在这种情况下,我们在这里给出了标签值。

before

 .squaredThree label:before {
     content: 'Testing check-box';
     position: absolute;
     top: 4px;
     left: 30px;
     white-space:nowrap;
     background: transparent;
 } 
/* .squaredThree */
.squaredThree {
  position: relative;
  float:left;
  margin: 10px
}

.squaredThree label {
  width: 20px;
  height: 20px;
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
  background: #D7B1D7;
  border-radius: 4px; 
}

.squaredThree label:after {
  content: '';
  width: 9px;
  height: 5px;
  position: absolute;
  top: 4px;
  left: 4px;
  border: 3px solid #fcfff4;
  border-top: none;
  border-right: none;
  background: transparent;
  opacity: 0;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.squaredThree label:hover::after {
  opacity: 0.3;
}

.squaredThree input[type=checkbox] {
  visibility: hidden;
}

.squaredThree input[type=checkbox]:checked + label:after {
  opacity: 1;
}
/* end .squaredThree */

.label-text {
  position: relative;
  left: 10px;
}
 
.squaredThree label:before {
  content: 'Testing check-box';
  position: absolute;
  top: 4px;
  left: 30px;
  white-space:nowrap;
  background: transparent;
  } 

0
投票

你已经限制了 <div class="squaredThree"> <input type="checkbox" name="optionsRadios" id="checkOther" value="other" > <label for="checkOther"></label> </div> 的宽度,删除.squaredThree label或增加它。还要添加width: 20px

padding-left
/* .squaredThree */
.squaredThree {
  position: relative;
  float:left;
  margin: 10px
}

.squaredThree label {
  width: 130px;
  height: 20px;
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
  background: #D7B1D7;
  border-radius: 4px; 
  padding-left: 20px;
}

.squaredThree label:after {
  content: '';
  width: 9px;
  height: 5px;
  position: absolute;
  top: 4px;
  left: 4px;
  border: 3px solid #fcfff4;
  border-top: none;
  border-right: none;
  background: transparent;
  opacity: 0;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.squaredThree label:hover::after {
  opacity: 0.3;
}

.squaredThree input[type=checkbox] {
  visibility: hidden;
}

.squaredThree input[type=checkbox]:checked + label:after {
  opacity: 1;
}
/* end .squaredThree */

.label-text {
  position: relative;
  left: 10px;
}
© www.soinside.com 2019 - 2024. All rights reserved.