Colin Roe
Colin Roe

Reputation: 804

Can't change font-size of radio button

I want to reduce the size of the font in my radio buttons as they are taking up too much space on mobile app. I tried to do inline styling and it did not work. I'm using jquery mobile 1.3 and when I was using jquery mobile 1.2, I had no problem changing font-size. Any help would be appreciated.

<div data-type="horizontal">
                <fieldset class="ui-grid-a">
                    <legend>I am a </legend>
                    <div class="ui-block-a">
                         <input type="radio" name="rad-User-Type-1" id="rad-User-Type-1" value="driver" checked="checked" data-theme="c" />
                         <label for="rad-User-Type-1"style="font-size:12px" >Driver</label>
                    </div>
                    <div class="ui-block-b">
                         <input type="radio" name="rad-User-Type-1" id="rad-User-Type-2" value="passenger"  data-theme="c"/>
                         <label for="rad-User-Type-2" style="font-size:12px">Passenger</label>
                    </div>                    
                </fieldset>

            </div>

Upvotes: 1

Views: 3873

Answers (3)

x93stacked
x93stacked

Reputation: 1

.ui-radio-on .ui-btn-text, .ui-radio-off .ui-btn-text{
    font-size:13px;
}

Upvotes: 0

pablo pidal
pablo pidal

Reputation: 349

You can inspect styles with Firebug (http://getfirebug.com/) and see/edit styles in real time to find the solution.

Upvotes: 1

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167192

Try changing:

<label for="rad-User-Type-1"style="font-size:12px" >Driver</label>

To:

<label for="rad-User-Type-1"style="font-size:12px !important" >Driver</label>

And let us know?

Upvotes: 0

Related Questions