Начальная карта как кнопка для отображения данных

Question

У меня есть пользовательский флажок, я добавил текст и хочу, чтобы текст был выровнен по правой стороне флажка,

Вот jsfidle: https://jsfiddle.net/Mwanitete/ewpo0h1g/1/

Здесьздесь HTML

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

css

/* .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;
}

что мне не хватает в моем коде?Любое предложение будет полезно спасибо

Answer 1

Переместите текст за пределы поля метки, как показано ниже.

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

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

Решение 2: Вы применяете стили для флажка, используя .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;
  } 

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

Answer 2

Вы ограничили ширину .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;
}

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