CODEWITHSUNDEEP
cssionic2
Yokesh Varadhan
Yokesh Varadhan

Reputation: 1636

set text inside a check box

Hi is it possible to add text inside check box replacing the tick icon.enter image description here

I am could not achieve it with this code could someone suggest me how to make a size selection box with a text inside it

<ion-col>
        <p>Choose the size</p>
        <ion-item>
            <ion-checkbox >S</ion-checkbox>  
        </ion-item>       
    </ion-col>

Help me to bring out this type of UI

Upvotes: 1

Views: 18464

Answers (2)

Jyoti Pathania
Jyoti Pathania

Reputation: 4989

Updated

check updated demo here

Add the following Js to get the relevant radio value

JS:

$("body").on("click", "label", function(e) {
  var getValue = $(this).attr("for");
  var goToParent = $(this).parents(".select-size");
  var getInputRadio = goToParent.find("input[id = " + getValue + "]");
  console.log(getInputRadio.attr("id"));  
});

I assume that the user select only one size at a time. if user can select the multiple size modify the example with checkbox.

Try this

Check Demo here

HTML:

<div class="select-size">
  <input type="radio" name="s-size" id="small" checked/>
  <input type="radio" name="s-size" id="medium" />
  <input type="radio" name="s-size" id="large" />
  <input type="radio" name="s-size" id="x-large" />
  <input type="radio" name="s-size" id="xx-large" />

  <label for="small">S</label>
  <label for="medium">M</label>
  <label for="large">L</label>
  <label for="x-large">XL</label>
  <label for="xx-large">XXL</label>

</div>

CSS:

.select-size  input{
  display: none;
}

label {
  display: inline-block;
  width: 50px;
  height: 50px;
  text-align: center;
  border: 1px solid #ddd;
  line-height: 50px;
  cursor: pointer
}

#small:checked ~ label[for="small"],
#medium:checked ~ label[for="medium"],
#large:checked ~ label[for="large"],
#x-large:checked ~ label[for="x-large"],
#xx-large:checked ~ label[for="xx-large"] {
  background: #999;
  color: #ffffff;
}

Upvotes: 3

j-printemps
j-printemps

Reputation: 1298

You can hide the input and use the label to select the checkbox. Then style your label like in the example below, using :not(:checked) and :checked selectors. Same logic can be applied to radio buttons.

ul {
  padding: 0;
  margin: 0;
  clear: both;
}

li{
  list-style-type: none;
  list-style-position: outside;
  padding: 10px;
  float: left;
}

input[type="checkbox"]:not(:checked), 
input[type="checkbox"]:checked {
  position: absolute;
  left: -9999%;
}

input[type="checkbox"] + label {
  display: inline-block;
  padding: 10px;
  cursor: pointer;
  border: 1px solid black;
  color: black;
  background-color: white;
  margin-bottom: 10px;
}

input[type="checkbox"]:checked + label {
  border: 1px solid white;
  color: white;
  background-color: black;
}
<ul>
  <li>
    <input type="checkbox" id="check_1" name="check_1" value="check_1">
    <label for="check_1">S</label>
  </li>
  <li>
    <input type="checkbox" id="check_2" name="check_2" value="check_2">
    <label for="check_2">M</label>
  </li>
  <li>
    <input type="checkbox" id="check_3" name="check_3" value="check_3">
    <label for="check_3">L</label>
  </li>
  <li>
    <input type="checkbox" id="check_4" name="check_4" value="check_4">
    <label for="check_4">XL</label>
  </li>
</ul>

Upvotes: 5

Related Questions