No attribute for CSS class

Question

Google isn't offering much help, probably because I don't know how to phrase my question. Is there a way to specify the CSS class for a particular type of elements through <style>? For example, if I want all the checkboxes in my div to have a "checkbox-inline" class (yes, that's Bootstrap), can't I do something like:

<style>
     input[type=checkbox] 
     {
         class: checkbox-inline;
     }
</style>

This doesn't seem to work. There is no "class" attribute (at least not shown by Intellisense).

I am not sure about applying class using CSS, using Jquery it is definitely possible. But you can always write the properties of class checkbox-inline inside input[type=checkbox] { /* all css properties of class checkbox-inline can go here */ } — Dharam
– Dharam, Commented Oct 14, 2014 at 10:43

James Donnelly · Accepted Answer · 2014-10-14 10:48:01Z

2

No, this isn't what CSS is for.

You can do this with JavaScript though, but this will only happen after your page has loaded:

Pure JavaScript

var elems = document.querySelectorAll('input[type=checkbox]');

for (var i = 0; i < elems.length; i++)
  elems[i].className += " checkbox-inline";

.checkbox-inline {
    display: block;
}

<input type="checkbox" /> Checkbox 1<br>
<input type="checkbox" /> Checkbox 2<br>
<input type="checkbox" /> Checkbox 3<br>
<input type="checkbox" /> Checkbox 4

jQuery

$('input[type=checkbox]').addClass("checkbox-inline");

.checkbox-inline {
    display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" /> Checkbox 1<br>
<input type="checkbox" /> Checkbox 2<br>
<input type="checkbox" /> Checkbox 3<br>
<input type="checkbox" /> Checkbox 4

The best solution, however, would be to alter your HTML files manually.

edited Oct 14, 2014 at 10:48

answered Oct 14, 2014 at 10:42

James Donnelly

129k35 gold badges215 silver badges224 bronze badges

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

4 Comments

dotNET Over a year ago

Fair enough. Although almost all the answers are saying the same thing, this one is better than others in quite a few ways. Accepting. Thanks.

dotNET Over a year ago

And I can't alter HTML files. The output code is generated by ASP.NET CheckBoxList control.

James Donnelly Over a year ago

@dotNET in that case the best option would be to alter your ASP.NET code to add the class in. IIRC ASP.NET controls have a CssClass property, but it's been a long time since I've used ASP.NET so this may be incorrect.

dotNET Over a year ago

ASP.NET controls do have CssClass property, but CheckBoxList is a composite control that renders a table in the output, which in turn contains checkboxes that I'm targeting. So using CssClass doesn't help much. Anyway, I guess I can live with JS. Thanks again.

pimmey · Accepted Answer · 2014-10-14 10:41:59Z

0

CSS cannot be used for operations like that. You would need JavaScript to add classes to certain elements.

answered Oct 14, 2014 at 10:41

pimmey

4612 silver badges7 bronze badges

Comments

Bowersbros · Accepted Answer · 2014-10-14 10:42:11Z

0

There is no way using CSS to set a class of an item.

If you want to change the class of an element, you will have to do it with Javascript.

Since you are already using bootstrap, you can utilise jQuery too. Something like this might work:

$('input[type=checkbox]').each(function() {
    $(this).class('checkbox-inline');
});

answered Oct 14, 2014 at 10:42

Bowersbros

3,6182 gold badges21 silver badges24 bronze badges

Comments

Chirag Mongia · Accepted Answer · 2014-10-14 10:42:33Z

0

If I understand correctly, you want to add a class on all the checkboxes in a div. Sorry, this won't be possible without using JAVASCRIPT.

Or if you're using jQuery in your project, you will be able to do it in even less lines of code

answered Oct 14, 2014 at 10:42

Chirag Mongia

5554 silver badges12 bronze badges

Comments

Barry · Accepted Answer · 2014-10-14 10:43:22Z

0

No you can's but if you are using Bootsrap why not using jQuery.

$(document).ready(function(){
   $("input[type=checkbox]").addClass('checkbox-inline');
});

answered Oct 14, 2014 at 10:43

Barry

3,7331 gold badge20 silver badges25 bronze badges

Collectives™ on Stack Overflow

No attribute for CSS class

5 Answers 5

Pure JavaScript

jQuery

4 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Pure JavaScript

jQuery

4 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related