Jquery mobile 组合输入元素的jQuery移动表单

使用jQuery mobile时，是否可以将复选框或按钮与文本输入结合起来？就像我下面的图片

我想使用它作为字段验证，这样当用户更新字段时，它将变为红色或绿色

---

jQuery Mobile不包括此功能，但您可以通过CSS来实现

这里是一个带有几个选项的

第一个按钮使用一个表，因此左按钮的大小总是相同的，并且输入会随着窗口大小的调整而增大/缩小。而第二个选项使用div和按钮以及标签grow-short

对于表格，css删除表格上的边框和间距，并将第一个td宽度设置为常量值。css的其余部分使按钮和输入看起来正确：

<table id="specialContTbl">
  <tr>
    <td class="btntd">
      <button data-role="none" id="btn">B</button>
    </td>
    <td class="inptd">
      <input data-role="none" type="text" id="inp1" name="inp1" value="" placeholder="enter some text" />
    </td>
  </tr>
</table>

#specialContTbl {
    border-spacing: 0;
    border-collapse: collapsed;
}
#specialContTbl td {
    padding:0;
    margin: 0;
    border: 0;
    vertical-align: top;
}
#specialContTbl td:first-child{
    width: 60px;
}
#specialContTbl{
    width: 100%;
}
#specialContTbl button, #specialContTbl input {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
#specialContTbl button {
    font-weight: normal;
    background: #00f050;
    padding: 5px;
    color: #333;
    border: 1px solid #d4d4d4;
    border-right: 0;
    border-bottom-left-radius:1em;
    border-top-left-radius: 1em;    
    line-height: 28px;
    height: 38px;
    width: 100%;
    float: left;
    text-align: center;
    cursor: pointer;
    white-space:nowrap;
}
#specialContTbl input {
    width: 100%;
    height: 38px;
    padding: 8px;
    border: 1px solid #d4d4d4;
    border-bottom-right-radius: 1em;
    border-top-right-radius: 1em;
    line-height: 18px;
    float: right;
    box-shadow: inset 0px 2px 2px #ececec;
}
#specialContTbl input:focus {
    outline: 0;
}

B
#特殊合同{
边界间距：0；
边界塌陷：塌陷；
}
#特约通讯员{
填充：0；
保证金：0；
边界：0；
垂直对齐：顶部；
}
#特别注意：第一个孩子{
宽度：60px；
}
#特殊合同{
宽度：100%；
}
#specialContTbl按钮，#specialContTbl输入{
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
}
#特殊控制按钮{
字体大小：正常；
背景：#00f050；
填充物：5px；
颜色：#333；
边框：1px实心#d4；
右边界：0；
边框左下半径：1米；
边框左上半径：1米；
线高：28px；
高度：38px；
宽度：100%；
浮动：左；
文本对齐：居中；
光标：指针；
空白：nowrap；
}
#特殊输入{
宽度：100%；
高度：38px；
填充：8px；
边框：1px实心#d4；
边框右下半径：1米；
边框右上角半径：1米；
线高：18px；
浮动：对；
盒影：插入0px 2px 2px#ececec；
}
#特殊控制TBL输入：焦点{
大纲：0；
}