Is there a way to add jquery ui classes into my own css file per element

Question

is there a way to add jquery ui classes into my own css file per element, IE:

       input { 
               ui-corner-all  /*  <- JQuery UI class */ 

              }

as opposed to adding the class to every input, IE:

       <input name="myinput" type="text" class="ui-corner-all"  value="" />

Are you meaning that you would like to just apply the ui-corner-all class attributes directly to `input` such that you can remove the class name from the actual input element? — Mike Brant, Jan 17 '13 at 20:59
You could duplicate the CSS definition from the UI css file and put it in your own css file, applied to any element you want. Would that work for you? — showdev, Jan 17 '13 at 21:00
You can check out LESS: here a similar question http://stackoverflow.com/questions/1065435/can-a-css-class-inherit-one-or-more-other-classes — Irvin Dominin, Jan 17 '13 at 21:00

score 1 · Answer 1 · edited May 23 '17 at 10:24

1

You can check out LESS, here is a very similar question on SO Can a CSS class inherit one or more other classes?

LESS is an extension for CSS a great level of abstraction with variables, nested rules, function, operations, etc

edited May 23 '17 at 10:24

Community

1
1

answered Jan 17 '13 at 21:07

Irvin Dominin

30,819
9
77
111

how is the browser compatibility with your answer compaired to the javascript answer below? – M-n Jan 17 '13 at 21:14

score 0 · Accepted Answer · answered Jan 17 '13 at 21:01

You can use the jQuery .addClass method to add a class to elements at any time, including page load, such as:

$(function() {
  $(input).addClass('ui-corner-all');
});

This would add the ui-corner-all class to every input element in the html when the page loads. If you would like to select only certain elements on the page, use a more specific selection, such as:

$(function() {
  $('#myInput').addClass('ui-corner-all');
});

This will add the ui-corner-all class to all of the elements on the page that have the ID of myInput.

Granted, this is not what I was asking for, it worked better for me! Thx — M-n, Jan 24 '13 at 01:30

score 0 · Answer 3 · answered Jan 17 '13 at 21:08

You might want to look into checking out Sass. This will give you the option to extend css classes to your own classes via @extend.

This is a handy Sass + Compass video

Then after you can do this

This way, you don't have to depend on javascript to add classes. It's all done through css.

Hope this helps!

score 0 · Answer 4 · answered Jan 17 '13 at 21:10

You could also use a preprocessor like LESS to achieve this. You would have to save your ui.css as ui.less and then you could do something like this:

@import url(ui.less);

input {
  .ui-corner-all;
}

After compilation of your less to css, it would take all the styles of the ui-corners-all class and apply them to your inputs. And that is just one of the many advantages of using a css preprocessor. It is really worth looking into and is not very hard to learn if you are familiar with css. You can find more info here: http://lesscss.org/

Is there a way to add jquery ui classes into my own css file per element

4 Answers4