Changing The Style of Radio Buttons in Jquery Mobile 1.4.0

changing the Style of Radio buttons in jQuery mobile 1.4.0

To get a green inner circle with transparent around it and a border after that, you really need 2 circles. This could be achieved by adding a :before element as well as the :after element in CSS.

Here is a DEMO

The CSS makes the whole button 56px tall and vertically centers the text by making the line-height the same. When off, the radio image is 26x26 with a gray border. When on, the :before css adds a new 26x26 empty circle with a border while the :after css creates a smaller green circle in the center. NOTE: you may need to tweak sizes and margins to get your desired results.

input[type="radio"] {
    display: none;
}
.ui-radio label {
    height:56px;
    line-height: 56px;
    padding-left: 50px;
}
.ui-radio .ui-btn.ui-radio-off:after {
    background-image: none;
    width: 26px;
    height: 26px;
    border: 2px solid #6E7983;
    margin-top: -13px;
}
.ui-radio .ui-btn.ui-radio-on:after {
    background-color: #86D51C;
    width: 14px;
    height: 14px;
    margin-top: -6px;
    margin-left: 10px;
    border: 0;
}
.ui-radio .ui-btn.ui-radio-on:before {
    content:"";
    position: absolute;
    display: block;
    border: 2px solid #6E7983;
    border-radius: 50%;
    background-color: transparent;
    width: 26px;
    height: 26px;
    margin-top: 14px;
    margin-left: -39px;
}

different colors on radio buttons when they are active in Jquery mobile

Following styles should do the trick:

.ui-radio:nth-child(1) .ui-icon-radio-on.ui-icon{
    background-color:green;
}
.ui-radio:nth-child(2) .ui-icon-radio-on.ui-icon{
    background-color:grey;
}
.ui-radio:nth-child(3) .ui-icon-radio-on.ui-icon{
    background-color:red;
}​

Sample jsfiddle.

To style Horizontally stacked select options:

.ui-radio:nth-child(1) .ui-radio-on span.ui-btn-inner{
    background-color:green;
}
.ui-radio:nth-child(2) .ui-radio-on span.ui-btn-inner{
    background-color:grey;
}
.ui-radio:nth-child(3) .ui-radio-on span.ui-btn-inner{
    background-color:red;
}​

Sample jsfiddle.

How can I style the legend of jquery-mobile radio buttons like a list divider

You could put the radiogroup inside of a listview, and use the listdivider style for the title. To get to a result which is similar to what you demonstrated, you need to remove some padding, margins and borders.

See this example: http://jsfiddle.net/zdMhF/

The code:

<div data-role="page">
    <div data-role="content">
<ul data-role="listview" data-inset="true">
    <li data-role="list-divider">Choose a pet:</li>
<li style="padding:0;border:0;">
<div data-role="fieldcontain" style="margin:0;">
    <fieldset data-role="controlgroup">
             <input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" />
             <label for="radio-choice-1">Cat</label>

             <input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2"  />
             <label for="radio-choice-2">Dog</label>

             <input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3"  />
             <label for="radio-choice-3">Hamster</label>

             <input type="radio" name="radio-choice-1" id="radio-choice-4" value="choice-4"  />
             <label for="radio-choice-4">Lizard</label>
    </fieldset>
</div>
</li>
</ul>
</div>
</div>​

Styling jQueryMobile 1.4 buttons as 1.3

It is hard to get it exact as jQM 1.3 enhanced buttons using nested spans which are no longer there in 1.4. However, with a little CSS you can get pretty close. Given a header with buttons:

<div data-role="header"  data-theme="b">
   <a href="#" class="btn_round ui-btn ui-shadow ui-corner-all ui-icon-home ui-btn-icon-left"> Home </a>
    <h1>Theme B</h1>
  <a href="#" class="btn_round ui-btn ui-shadow ui-corner-all ui-icon-home ui-btn-icon-right"> Contact Us </a>
</div>

Assign a new class to the buttons (btn_round in my example) and then create the following CSS:

.btn_round
{
    -moz-box-shadow: 0px 1px 0 rgba(255,255,255,0.3);
    -webkit-box-shadow: 0px 1px 0 rgba(255,255,255,0.3);
    box-shadow: 0px 1px 0 rgba(255,255,255,0.3);

    -moz-border-radius:             1.5em !important;
    -webkit-border-radius:          1.5em !important;
    border-radius:                  1.5em !important;
    background-image: linear-gradient(rgb(68, 68, 68), rgb(45, 45, 45));
    background-origin: padding-box;
    background-size: auto;
    border-color: rgb(17, 17, 17);
    box-shadow: rgba(255, 255, 255, 0.298039) 0px 1px 0px 0px;
    text-shadow: rgb(17, 17, 17) 0px 1px 1px;   
}
.btn_round:after{
    -webkit-box-shadow: rgba(255, 255, 255, 0.4) 0px 1px 0px 0px;
    box-shadow: rgba(255, 255, 255, 0.4) 0px 1px 0px 0px;
}

This adds the gradient background, rounded corners and shadows that were present in 1.3.

Here is a working DEMO

NOTE: the demo includes CSS for both the dark theme and the light theme. Tweak the CSS to get your desired look.

jQuery Mobile 1.4.0 split button, right button only CSS

With a slight change in markup, I believe you can do this with 2 CSS rules. The existing ui-li-static and ui-body-inherit classes take care of the LI, so you only need a margin rule to line up the inputs and a class for the readonly-btn-a:

<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;
}

Here is an updated FIDDLE (based on Jeff's GOOD answer)

UPDATE: for less padding within the LI elements add:

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

Updated DEMO

---

Related Topics