Styling input with jquery

Question

Ok I have the css sorted:

Now to style the input box ( but this isnt working ) any suggestions. Think my js is messed up. The html element:

<input name="latLng" class="latLng" id="latLng2" type="text" disabled />

The JS:

<script type="text/javascript">
jQuery(document).ready(function(){
    jQuery('input.latLng').locationPicker({
    width: "500px",
    height: "20px",
    backgroundColor: '#fff',
    border: '1px solid #ccc',
    borderRadius: 10,
    padding: 10
    });
});
</script>

Where am I going wrong please.

To format, select your code and click the 101010 button at the top, or indent it over 4 spaces manually :) — Nick Craver
– Nick Craver, Commented Nov 9, 2010 at 23:08
Or type backquotes (`) around the snippet to do inline code. — Ender
– Ender, Commented Nov 10, 2010 at 0:15

Nick Craver · Accepted Answer · 2010-11-09 23:06:28Z

2

To set styles, use .css() for the styling of the element and call your plugin separately, like this:

jQuery(document).ready(function(){
    jQuery('input.latLng').css({
    width: "500px",
    height: "20px",
    backgroundColor: '#fff',
    border: '1px solid #ccc',
    borderRadius: 10,
    padding: 10
    }).locationPicker();
});

Or, a bit shorter:

jQuery(function($){
    $('input.latLng').css({
      width: 500,
      height: 20,
      backgroundColor: '#fff',
      border: '1px solid #ccc',
      borderRadius: 10,
      padding: 10
    }).locationPicker();
});

answered Nov 9, 2010 at 23:06

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

422 Over a year ago

Thanks Nick, will try that ( I am trying to get the hang of SO )

422 Over a year ago

Ok now code is: <pre><script type="text/javascript"> jQuery(function($){ $('input.latLng').css({ width: 300, height: 18, padding: '4px', backgroundColor: '#fff', border: '1px solid #ccc', borderRadius: '3px', padding: '3px' }).locationPicker(); }); </script></pre> all seems to work fine, just rounded corners arent really showing ( chosen 3px to match other form elements )

Collectives™ on Stack Overflow

Styling input with jquery

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related