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.

(i.e) 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>

Can't do that much without the code. http://stackoverflow.com/questions/30520858/dynamically-adjust-html-text-input-width-to-content Here you can find some help. — JustARandomProgrammer, Mar 10 '17 at 14:20
If you would prefer to work with a library, check out [stretchy](http://lea.verou.me/2015/07/stretchy-form-element-autosizing-the-way-it-should-be/). — Andrei V, Mar 10 '17 at 14:24

sabithpocker · Accepted Answer · 2017-03-10T14:41:49.580

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

Thanks for your help. After click also the width should remain same. But here it becomes small box after click. iam spending my whole day on this. Please help on this. https://jsfiddle.net/sharmilashree/os7xp2br/12/ — Ammu, Mar 10 '17 at 14:45
Try to understand how it worked when you get time so that you can save a lot of time in the future. Glad that it helped! cheers. — sabithpocker, Mar 10 '17 at 14:53
Yeah sure.. If you get time please suggest on this. When i put one than one
Please isolate your issue and post it as a separate question. Someone will answer you for sure, if not me! — sabithpocker, Mar 10 '17 at 15:04

dynamically set input width based on text length

1 Answers1