如何更改jQuery插件的CSS样式？

Question

I have this test page: http://www.problemio.com/problems/problem.php?problem_id=305

I am trying to make the form towards the middle of the page look nicer. When I look at it in FireBug, there is a lot of padding space on the sides of that tabs from this div:

<div id="tabs-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom">

How can I change the space padding on the sides of the divs to be less pixels? Also, is there a way to make the black strip across the tabs all black?

Thanks!

Answer 1

You can override the css defined by jQuery UI css in your application css file or on the page. You can set the padding as below and override all the required styles in the same way.

.ui-tabs-panel{
   padding: 0px !important;//define the style as per your need
}

Answer 2

懒惰的方法是在CSS中设置重要属性。

#tabs-1{padding-left: some lesser value !important}

Answer 3

It looks like the padding is getting added because each form element is wrapped inside a paragraph <p> tag. The style is applied to just the p element in your stylesheet, so you can overwrite it with the following: #add_suggested_solution p {margin:0 0 0 0} . Note, replace the 0's with whatever your desired margin is.

What is the black stripe that you are referring to?