CODEWITHSUNDEEP
javascriptjquerycssjquery-mobilebutton
user3248668
user3248668

Reputation: 25

how to add text color to button in jquery mobile

hi i want to add color to the text inside button and also want to remove border and outline from the button but i couldnt fix it.please anybody help me out.i am using jquery-mobile.

<div class="ui-btn-right" data-role="controlgroup" data-type="horizontal" data-corner="false">

           <input type="submit" value="post" id="post" onClick="postprivate()"  style="color:green;" ></input>
            </div>

and this is the css which i am trying but its not applied at all

#post{color:green;
 text-decoration:none:
 font-size:24px;
 margin-right:20px;
 outline:none;
 width:60px;
 border:0px;
 display:block;}

Upvotes: 1

Views: 1172

Answers (2)

ezanker
ezanker

Reputation: 24738

jQuery Mobile provides an attribute called data-wrapper-class that applys a named CSS class to the ui-btn DIV it creates when enhancing the input. So you can do something like this:

<input type="submit" value="post" id="post" onClick="postprivate()" data-wrapper-class="mybuttonstyle"></input>

.mybuttonstyle {
    color: green !important;
    font-size:24px !important;
    margin-right:20px;
    outline:none;
    width:60px;
    border:0px;
}

Here is a DEMO

Upvotes: 2

Alien
Alien

Reputation: 3668

if you inspect element, you will find out input does not display, a span class="ui-btn-inner" instead it.

enter image description here

so using js code to change the span color property

$(function()
{
$('#post').prev('span.ui-btn-inner').css('color','green');
});

the result

enter image description here

jsfiddle http://jsfiddle.net/6rbf2Lmu/

Upvotes: 1

Related Questions