CODEWITHSUNDEEP
jqueryhtmlcssjquery-ui
Raj
Raj

Reputation: 75

changing css property in Jquery

below is my html page, which contains a button. in my button input.ui-button { padding: 0.4em 1em; } style is added to buttons. it is adding it from jquery-ui.css . i have to add in-line to change padding values. but i can't add this as per instruction. please suggest me is there any other way to set these values other than in-line style.

       <body>
       <input type="button" onclick="javascript:submitForm('reset');" class="ui-button- default ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" 
       value="Reset">
      </body>

Upvotes: 0

Views: 554

Answers (2)

David Laberge
David Laberge

Reputation: 16081

Try something like

  <body>
   <input type="button" id="btn" value="Reset">
  </body>

In Javascript:

$('#btn').button();                 // to apply the default css style of the jQuery UI boutton
$('#btn').css({'margin-left':'20px'}); // to modify the css of the element
$('#btn').click(function(){
   // This function is called when the bouton is clicked
});

Upvotes: 2

Shadow Wizzard
Shadow Wizzard

Reputation: 66398

Just add your own style sheet overriding the .ui-button padding definition:

<style type="text/css">
    .ui-button {  padding: 0; }
</style>

Upvotes: 1

Related Questions