dynamically set input width based on text length

Question

Problem with menu tag it has checkbox and label. Basically it's a checkbox whenever it clicked then color will change. checked - Blue and unchecked Ash color. It's working fine.

But I'm having problems with checkbox width. I do not want to keep a static width for all checkboxes. It should dynamically set width size.

(ie) based on text, it automatically sets width. If Text contain "Su" then width should be small amount. If Text contain "JANU" then width should bigger than above case.

.tgl + .tgl-btn {
     outline: 0;
     display: block;
     width: 30px;
     height: 40px;
     position: relative;
     cursor: pointer;
     user-select: none;
}

Anyone help on this?

Text should fit inside the checkbox.

https://jsfiddle.net/sharmilashree/os7xp2br/

 ul, li { list-style: none; margin: 0; padding: 0; } .tg-list { text-align: center; display: flex; align-items: center; } .tg-list-item { margin: 0 1px; } .tgl { display: none; } .tgl, .tgl:after, .tgl:before, .tgl *, .tgl *:after, .tgl *:before, .tgl + .tgl-btn { box-sizing: border-box; } .tgl::selection, .tgl:after::selection, .tgl:before::selection, .tgl *::selection, .tgl *:after::selection, .tgl *:before::selection, .tgl + .tgl-btn::selection { background: none; } .tgl + .tgl-btn { outline: 0; display: block; width: 30px; height: 40px; position: relative; cursor: pointer; user-select: none; } .tgl + .tgl-btn:after, .tgl + .tgl-btn:before { position: relative; display: block; content: ""; width: 50%; height: 100%; } .tgl + .tgl-btn:after { left: 0; } .tgl + .tgl-btn:before { display: none; } .tgl:checked + .tgl-btn:after { left: 50%; } .tgl-light + .tgl-btn { background: #f0f0f0; border-radius: 2em; padding: 2px; transition: all .4s ease; } .tgl-light + .tgl-btn:after { border-radius: 50%; background: #fff; transition: all .2s ease; } .tgl-light:checked + .tgl-btn { background: #9FD6AE; } .tgl-ios + .tgl-btn { background: #fbfbfb; border-radius: 2em; padding: 2px; transition: all .4s ease; border: 1px solid #e8eae9; } .tgl-ios + .tgl-btn:after { border-radius: 2em; background: #fbfbfb; transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease, margin 0.3s ease; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 4px 0 rgba(0, 0, 0, 0.08); } .tgl-ios + .tgl-btn:hover:after { will-change: padding; } .tgl-ios + .tgl-btn:active { box-shadow: inset 0 0 0 2em #e8eae9; } .tgl-ios + .tgl-btn:active:after { padding-right: .8em; } .tgl-ios:checked + .tgl-btn { background: #86d993; } .tgl-ios:checked + .tgl-btn:active { box-shadow: none; } .tgl-ios:checked + .tgl-btn:active:after { margin-left: -.8em; } .tgl-skewed + .tgl-btn { overflow: hidden; transform: skew(-10deg); backface-visibility: hidden; transition: all .2s ease; font-family: Arial; background: #888; } .tgl-skewed + .tgl-btn:after, .tgl-skewed + .tgl-btn:before { transform: skew(10deg); display: inline-block; transition: all .2s ease; width: 100%; text-align: center; position: absolute; line-height: 2em; color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4); } .tgl-skewed + .tgl-btn:after { left: 100%; content: attr(data-tg-on); } .tgl-skewed + .tgl-btn:before { left: 0; content: attr(data-tg-off); } .tgl-skewed + .tgl-btn:active { background: red; } .tgl-skewed + .tgl-btn:active:before { left: -10%; } .tgl-skewed:checked + .tgl-btn { background: #86d993; } .tgl-skewed:checked + .tgl-btn:before { left: -100%; } .tgl-skewed:checked + .tgl-btn:after { left: 0; } .tgl-skewed:checked + .tgl-btn:active:after { left: 10%; } .tgl-flat + .tgl-btn { padding: 2px; transition: all .2s ease; background: #fff; border: 4px solid #19BEC8; border-radius: 4px; } .tgl-flat + .tgl-btn:after { transition: all .2s ease; background: #19BEC8; content: ""; border-radius: 4px; } .tgl-flat:checked + .tgl-btn { border: 4px solid #19BEC8 } .tgl-flat:checked + .tgl-btn:after { left: 50%; background: #7FC6A6; } .tgl-flip + .tgl-btn { padding: 2px; transition: all .2s ease; font-family: Arial; perspective: 100px; } .tgl-flip + .tgl-btn:after, .tgl-flip + .tgl-btn:before { display: inline-block; /*transition: all .4s ease;*/ width: 100%; text-align: center; position: absolute; line-height: 40px; color: red; position: absolute; top: 0; left: 0; backface-visibility: hidden; border-radius: 4px; font-size: 14pt; } .tgl-flip + .tgl-btn:after { content: attr(data-tg-on); background: #FFFFFF; transform: rotateY(-180deg); } .tgl-flip + .tgl-btn:before { background: #FFFFFF; content: attr(data-tg-off); border: solid 1px #E8E8E8; color: #E8E8E8; border-radius: 4px 4px 4px 4px; } .tgl-flip + .tgl-btn:active:before { transform: rotateY(-20deg); } .tgl-flip:checked + .tgl-btn:before { transform: rotateY(180deg); } .tgl-flip:checked + .tgl-btn:after { transform: rotateY(0); left: 0; background: #DDF5F7; color: #19BEC8; border: solid 1px #19BEC8; border-radius: 4px 4px 4px 4px; } .tgl-flip:checked + .tgl-btn:active:after { transform: rotateY(20deg); } 

 <ul id="1" name="1" class="tg-list SpotTypeChk"> <li class="tg-list-item"> <input id="PP" name="PP" type="checkbox" class="tgl tgl-flip" checked /> <label data-tg-off="PP" data-tg-on="PP" for="P" class="tgl-btn"></label> </li> </ul> <ul id="1" name="1" class="tg-list SpotTypeChk"> <li class="tg-list-item"> <input id="PYO_" name="PYO_" type="checkbox" class="tgl tgl-flip" checked /> <label data-tg-off="PYO1" data-tg-on="PYO1" for="PYO_" class="tgl-btn"></label> </li> </ul> <ul id="1" name="1" class="tg-list SpotTypeChk"> <li class="tg-list-item"> <input id="PYO12" name="PYO12" type="checkbox" class="tgl tgl-flip" checked /> <label data-tg-off="PYO12" data-tg-on="PYO12" for="PYO12" class="tgl-btn"></label> </li> </ul> 

Answer 1

.tgl-flip:checked + .tgl-btn:after {
  transform: rotateY(0);
  left: 0;
  width: auto;
  background: #DDF5F7;
  color: #19BEC8;
  border: solid 1px #19BEC8;
  border-radius: 4px 4px 4px 4px;
}

 ul, li { list-style: none; margin: 0; padding: 0; } .tg-list { text-align: center; display: flex; align-items: center; } .tg-list-item { margin: 0 1px; } .tgl { display: none; } .tgl, .tgl:after, .tgl:before, .tgl *, .tgl *:after, .tgl *:before, .tgl + .tgl-btn { box-sizing: border-box; } .tgl::selection, .tgl:after::selection, .tgl:before::selection, .tgl *::selection, .tgl *:after::selection, .tgl *:before::selection, .tgl + .tgl-btn::selection { background: none; } .tgl + .tgl-btn { outline: 0; display: block; width: auto; height: 40px; position: relative; cursor: pointer; user-select: none; } .tgl + .tgl-btn:after, .tgl + .tgl-btn:before { position: relative; display: block; content: ""; width: 50%; height: 100%; } .tgl + .tgl-btn:after { left: 0; } .tgl + .tgl-btn:before { display: none; } .tgl:checked + .tgl-btn:after { left: 50%; } .tgl-light + .tgl-btn { background: #f0f0f0; border-radius: 2em; padding: 2px; transition: all .4s ease; } .tgl-light + .tgl-btn:after { border-radius: 50%; background: #fff; transition: all .2s ease; } .tgl-light:checked + .tgl-btn { background: #9FD6AE; } .tgl-ios + .tgl-btn { background: #fbfbfb; border-radius: 2em; padding: 2px; transition: all .4s ease; border: 1px solid #e8eae9; } .tgl-ios + .tgl-btn:after { border-radius: 2em; background: #fbfbfb; transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease, margin 0.3s ease; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 4px 0 rgba(0, 0, 0, 0.08); } .tgl-ios + .tgl-btn:hover:after { will-change: padding; } .tgl-ios + .tgl-btn:active { box-shadow: inset 0 0 0 2em #e8eae9; } .tgl-ios + .tgl-btn:active:after { padding-right: .8em; } .tgl-ios:checked + .tgl-btn { background: #86d993; } .tgl-ios:checked + .tgl-btn:active { box-shadow: none; } .tgl-ios:checked + .tgl-btn:active:after { margin-left: -.8em; } .tgl-skewed + .tgl-btn { overflow: hidden; transform: skew(-10deg); backface-visibility: hidden; transition: all .2s ease; font-family: Arial; background: #888; } .tgl-skewed + .tgl-btn:after, .tgl-skewed + .tgl-btn:before { transform: skew(10deg); display: inline-block; transition: all .2s ease; width: 100%; text-align: center; position: absolute; line-height: 2em; color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4); } .tgl-skewed + .tgl-btn:after { left: 100%; content: attr(data-tg-on); } .tgl-skewed + .tgl-btn:before { left: 0; content: attr(data-tg-off); } .tgl-skewed + .tgl-btn:active { background: red; } .tgl-skewed + .tgl-btn:active:before { left: -10%; } .tgl-skewed:checked + .tgl-btn { background: #86d993; } .tgl-skewed:checked + .tgl-btn:before { left: -100%; } .tgl-skewed:checked + .tgl-btn:after { left: 0; } .tgl-skewed:checked + .tgl-btn:active:after { left: 10%; } .tgl-flat + .tgl-btn { padding: 2px; transition: all .2s ease; background: #fff; border: 4px solid #19BEC8; border-radius: 4px; } .tgl-flat + .tgl-btn:after { transition: all .2s ease; background: #19BEC8; content: ""; border-radius: 4px; } .tgl-flat:checked + .tgl-btn { border: 4px solid #19BEC8 } .tgl-flat:checked + .tgl-btn:after { left: 50%; background: #7FC6A6; } .tgl-flip + .tgl-btn { padding: 2px; transition: all .2s ease; font-family: Arial; perspective: 100px; } .tgl-flip + .tgl-btn:after, .tgl-flip + .tgl-btn:before { display: inline-block; /*transition: all .4s ease;*/ width: 100%; text-align: center; position: absolute; line-height: 40px; color: red; position: absolute; top: 0; left: 0; backface-visibility: hidden; border-radius: 4px; font-size: 14pt; } .tgl-flip + .tgl-btn:after { content: attr(data-tg-on); background: #FFFFFF; transform: rotateY(-180deg); } .tgl-flip + .tgl-btn:before { background: #FFFFFF; content: attr(data-tg-off); border: solid 1px #E8E8E8; color: #E8E8E8; width: auto; padding: 0 5px; border-radius: 4px 4px 4px 4px; } .tgl-flip + .tgl-btn:active:before { transform: rotateY(-20deg); } .tgl-flip:checked + .tgl-btn:before { transform: rotateY(180deg); } .tgl-flip:checked + .tgl-btn:after { transform: rotateY(0); left: 0; width: auto; padding:0 5px; background: #DDF5F7; color: #19BEC8; border: solid 1px #19BEC8; border-radius: 4px 4px 4px 4px; } .tgl-flip:checked + .tgl-btn:active:after { transform: rotateY(20deg); } 

 <ul id="1" name="1" class="tg-list SpotTypeChk"> <li class="tg-list-item"> <input id="PP" name="PP" type="checkbox" class="tgl tgl-flip" checked /> <label data-tg-off="PP" data-tg-on="PP" for="P" class="tgl-btn"></label> </li> </ul> <ul id="1" name="1" class="tg-list SpotTypeChk"> <li class="tg-list-item"> <input id="PYO_" name="PYO_" type="checkbox" class="tgl tgl-flip" checked /> <label data-tg-off="PYO1" data-tg-on="PYO1" for="PYO_" class="tgl-btn"></label> </li> </ul> <ul id="1" name="1" class="tg-list SpotTypeChk"> <li class="tg-list-item"> <input id="PYO12" name="PYO12" type="checkbox" class="tgl tgl-flip" checked /> <label data-tg-off="PYO12" data-tg-on="PYO12" for="PYO12" class="tgl-btn"></label> </li> </ul>