CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
raffian
raffian

Reputation: 32066

Apply bootstrap form styling to div elements without changing class

I'm building a screen with many form elements using the convention below; it saves me from adding class='...' to every input, button, and select box.

.formDiv button {
  font-family: verdana;
  font-size: 10px;
  border: 1px solid #999;
  border-radius:3px;
}

.formDiv input {
  font-family: verdana;
  border: 1px solid #999;
  width: 110px;
}

Now I want to use bootstrap; I've got everything configured; confirmed it's working. Is it possible to apply bootstrap3 styling without adding class='some-bs-style' to each form element? Ideally, I want to do something like this:

.myDiv input {
   //use bs3 input styling
}

.myDiv select {
   //use bs3 select styling
}

I see bootstrap uses form-control, so I tried setting that on the parent div using:

<div id='#formdiv' class='form-control'>

..but it did not work; I suck at css, so no surprise there.

Upvotes: 0

Views: 5491

Answers (1)

sensei
sensei

Reputation: 7562

Copy the rules from form-control and just apply the rules to input and select if you want to use it automatically for your formdiv class:

.formdiv input, select {
RULES FROM FORM CONTROL
}

DEMO HERE

Updated DEMO + CSS is here: http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.css

Copying is necessary because you cannot inherit rules from other classes. Therefore if you want to avoid applying form-control style to each input and select, you have to use approach above. But this is still faster than putting "form-control" to each input in each form.

Upvotes: 1

Related Questions