jQuery Mobile 1.4.0 сплит-кнопка, только правая кнопка CSS

Question

Я попытался создать список со списками, в которых есть кнопка с правой стороны. Так же, как и список раскладок jQuery Mobile, но только правая кнопка должна быть доступна для кликов. Левая часть должна содержать метку вместе с текстовым вводом.

Я нашел этот ответ: https://stackoverflow.com/a/15292521/2026623

Но класс, используемый в этом ответе был удален/переименованный в JQuery мобильного 1.4.0. Я узнал, что некоторые свойства теперь находятся в .ui-btn-a, но не все.

Так что я попытался реализовать его сам (имея мало знаний о CSS). Это то, что это выглядит так далеко:

HTML:

<li class="readonly-li-a"> 
    <a class="readonly-btn-a ui-field-contain"> 
     <label for="boss">Boss:</label> 
     <input type="text" id="boss" name="boss"> 
    </a> 
    <a data-role="button" data-inline="true" data-icon="bars" data-iconpos="notext"></a> 
</li> 

CSS:

.readonly-btn-a { 
    background: #fff!important /*{a-bup-background-color}*/; 
    color: #333!important /*{a-bup-color}*/; 
    text-shadow: 0 /*{a-bup-shadow-x}*/ 1px /*{a-bup-shadow-y}*/ 0 /*{a-bup-shadow-radius}*/ #f3f3f3 /*{a-bup-shadow-color}*/; 
    cursor: default !important; /* don't change to hand cursor */ 
    border: none !important; 
} 

.readonly-li-a { 
    border: 0 solid #ddd !important; 
    border-top-width: 1px !important; /*the line above the li */ 
    padding: .7em 1em !important; /*copied from .ui-li-static */ 
    background: #fff!important; /*white background instead of grey*/ 
    margin: 0 1px!important; /*the li stands out by 1px left/right without this*/ 
    -webkit-box-shadow: 0 1px 3px /*{global-box-shadow-size}*/  rgba(0,0,0,.15) /*{global-box-shadow-color}*/; 
    -moz-box-shadow: 0 1px 3px /*{global-box-shadow-size}*/   rgba(0,0,0,.15) /*{global-box-shadow-color}*/; 
    box-shadow: 0 1px 3px /*{global-box-shadow-size}*/    rgba(0,0,0,.15) /*{global-box-shadow-color}*/; 
} 

И это то, что он выглядит в действии: http://jsfiddle.net/MasterQuestMaster/QJ9m2/

Есть 2 проблемы с это решение, и я надеюсь, что кто-то может помочь мне решить их.

• Если вы введете текстовое поле, синий блеск будет обрезаться по границе -Tag. Я думаю, что это из-за заполнения я добавил в .readonly-li-a.
• Входной текст не выровнен правильно ( метка, хотя)

Или, может быть, кто-то даже пытался это раньше меня и нашел лучшее решение. Если да, отправьте его.

Answer 1

С небольшим изменением разметки, я считаю, вы можете сделать это с помощью 2 правил CSS. Существующие UI-ли-статические и щ-тела наследуют классы заботиться о LI, так что вам нужно всего лишь правило маржу выстраиваться входы и класс для чтения-БТН-а:

<ul data-role="listview" data-inset="true"> 
    <li> 
     <div class="ui-field-contain"> 
      <label>Normal:</label> 
      <input type="text" id="normal" name="normal"/> 
     </div> 
    </li> 
    <li class="ui-li-static ui-body-inherit"> 
     <a href="#" class="readonly-btn-a" > 
      <div class="ui-field-contain"> 
       <label>Link:</label> 
       <input type="text" id="link" name="link"/> 
      </div> 
     </a> 
     <a href="#" class="ui-btn ui-icon-bars ui-btn-icon-notext ui-btn-inline"></a> 
    </li> 
    <li> 
     <div class="ui-field-contain"> 
      <label>Normal:</label> 
      <input type="text" id="normal2" name="normal2"/> 
     </div> 
    </li> 
</ul> 

li .ui-field-contain { 
    margin-right: 42px; !important; 
} 
.readonly-btn-a { 
    background:    #fff!important /*{a-bup-background-color}*/; 
    color:     #333!important /*{a-bup-color}*/; 
    text-shadow: 0 /*{a-bup-shadow-x}*/ 1px /*{a-bup-shadow-y}*/ 0 /*{a-bup-shadow-radius}*/ #f3f3f3 /*{a-bup-shadow-color}*/; 
    cursor: default !important; 
    border: none !important; 
    padding: 0 !important; 
    margin: 0!important; 
} 

Вот обновленный FIDDLE (основано на хороший ответ Джеффа)

UPDATE: для меньшего заполнения в элементах LI добавить:

.ui-listview>.ui-li-static { 
    padding-top: 0 !important; 
    padding-bottom: 0 !important; 
} 

Обновлено DEMO

Answer 2

Вам нужно использовать jQuery mobile для стилизации? Может быть проще, если вы назначили data-role = 'none' в свои поля ввода и ввели все отдельно в свой CSS. Я сделал это на проектах только потому, что попытка заставить jQuery mobile вести себя может быть немного сложнее.