javascript - Using jQuery UI css styles for my own HTML elements - Stack Overflow

admin管理员组

文章数量:1296490

Using jQuery UI gives me these nice stylesheets. These apply to the widgets, ... of jQuery UI. But how could I apply these styles to my own HTML elements to have the same look and feel?

When I change the jQuery UI theme I want my pages to change accordingly. I am aware there are similar questions such as " jQuery UI Themeroller Question ". There it is said I can only open the CSS and manually apply a CSS class to my elements.

Is there no better / official way to do it? Especially with the Theme Switcher I could easily have a customizable UI.

-- Add on to original question --

OK, all of you explain me, that I have to manually apply the css class to my element. I appreciate the information and you certainly have more CSS experience than I do. However, when I later want to change the style, I have to change this (jQuery UI) class in many places - e.g. all td elements. So in my CSS files I prefer to apply styles via selectors.

Q: Can I re-apply a class (of the jQuery UI css) with a selector, something like "apply class XYZ to all of my table headers in div "ABC"?

I could do this via jQuery selection, but can I do it within "my css"?

Using jQuery UI gives me these nice stylesheets. These apply to the widgets, ... of jQuery UI. But how could I apply these styles to my own HTML elements to have the same look and feel?

When I change the jQuery UI theme I want my pages to change accordingly. I am aware there are similar questions such as " jQuery UI Themeroller Question ". There it is said I can only open the CSS and manually apply a CSS class to my elements.

Is there no better / official way to do it? Especially with the Theme Switcher I could easily have a customizable UI.

-- Add on to original question --

OK, all of you explain me, that I have to manually apply the css class to my element. I appreciate the information and you certainly have more CSS experience than I do. However, when I later want to change the style, I have to change this (jQuery UI) class in many places - e.g. all td elements. So in my CSS files I prefer to apply styles via selectors.

Q: Can I re-apply a class (of the jQuery UI css) with a selector, something like "apply class XYZ to all of my table headers in div "ABC"?

I could do this via jQuery selection, but can I do it within "my css"?

• javascript
• jquery
• html
• jquery-ui

Share Improve this question Follow edited May 23, 2017 at 12:26 CommunityBot 111 silver badge asked Aug 4, 2011 at 14:11 Horst WalterHorst Walter 14.1k3434 gold badges137137 silver badges239239 bronze badges 7

• 1 why not simply adding the jquery-UI css classes to your element? maybe i don't understand your question – Fender Commented Aug 4, 2011 at 14:14
• You do understand my question. Yes I could go thru the CSS, find the best CSS class and manually add it to my elements. But this would mean to add this class e.g. to all td elements, wouldn't it? Does not look so nice and also makes it difficult to change, or am I wrong? – Horst Walter Commented Aug 4, 2011 at 14:17
• just have to change the css class and not the elements by applying other css classes... just change your stylesheet and everything will be styled new – Fender Commented Aug 4, 2011 at 14:33
• I edited my answer to answer your followup – normanthesquid Commented Aug 4, 2011 at 14:36
• @Fender: I should not change the jQuery UI css, so when I write "td class="SomeJQueryClass", how would I do this? – Horst Walter Commented Aug 4, 2011 at 14:47

 |  Show 2 more ments

2 Answers 2

Sorted by: Reset to default 6

To answer your question, that is the official way of theming your own elements not constructed by a jQuery UI widget. You must apply the specific classes to your elements, and they will end up looking like other widgets from jQuery UI.

In firefox/chrome

Right click the element whose style you want to copy, and select inpsect element. Note which classes it belongs to.

Add those classes to your elements

to answer your td question above:

you could create a td class in your css, and copy the styles from the jquery ui csss file to it:

td{
 //Styles go here
}

also, you asked "apply class XYZ to all of my table headers in div "ABC"?" add this to your css file

if the divs ID is ABC

div#ABC th{
   //Styles Go Here
}

if the divs class is ABC

div.ABC th{
   //Styles Go Here
}

本文标签： javascriptUsing jQuery UI css styles for my own HTML elementsStack Overflow