根据文本长度动态设置输入宽度

【问题标题】：dynamically set input width based on text length根据文本长度动态设置输入宽度
【发布时间】：2017-03-10 14:16:49
【问题描述】：

菜单标签的问题，它有复选框和标签。基本上它是一个复选框，只要单击它，颜色就会改变。 选中 - 蓝色和未选中的灰颜色。它工作正常。

但我遇到了复选框宽度的问题。我不想为所有复选框保留静态宽度。它应该动态设置宽度大小。

（即）基于文本，它会自动设置宽度。 如果 Text 包含“Su”，那么宽度应该很小。 如果 Text 包含“JANU”，则宽度应大于上述大小写。

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

有人帮忙吗？

文本应该适合复​​选框。

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>

【问题讨论】：

  • 添加 html 代码以便人们可以提供帮助！ CSS 也总是有帮助
  • 没有代码就做不了那么多。 stackoverflow.com/questions/30520858/…在这里你可以找到一些帮助。
  • 如果您希望使用库，请查看stretchy。

标签： javascript jquery asp.net css


【解决方案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>

【讨论】：

  • 感谢您的帮助。单击后宽度也应保持不变。但是在这里点击后它变成了小盒子。我一整天都在这上面。请帮助解决这个问题。 jsfiddle.net/sharmilashree/os7xp2br/12
  • 非常感谢它对我有用..你节省了我的时间。
  • 当你有时间的时候试着去了解它是如何工作的，这样你将来可以节省很多时间。很高兴它有帮助！干杯。
  • 是的，当然.. 如果你有时间，请就此提出建议。当我把一比一
  • 它看起来很奇怪。 jsfiddle.net/sharmilashree/os7xp2br/21
  • 请隔离您的问题并将其作为单独的问题发布。如果不是我，肯定有人会回答你！
    • 猜你喜欢
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode