CODEWITHSUNDEEP
twitter-bootstraptwitter-bootstrap-3
Alain
Alain

Reputation: 37004

How to apply .h1, .h2, ... styles to form fields?

I'm building a kind-of-CMS app where user can set a page title. I try to be as WYSIWYG as possible, so to display my title field, I want to apply the final title's style.

The title will be displayed using:

<div class="h1">My gorgeous title</div>

But it looks like .form-control class enforces both alignment and font size: putting h1 as a field class doesn't help (you can check the fiddle): if I remove it, h1 applies but alignment no more.

Is there a trick to enforce another font-size without changing the alignment?

Upvotes: 0

Views: 695

Answers (1)

Rounin
Rounin

Reputation: 29511

In CSS, styles for an id will always trump styles for a class.

What you're seeing is the styles for #textinput2 (inherited from body, I think) trumping the styles for .h1.

Your solution is to specify style rules for an element which has both an id of #textinput2 and simultaneously a class of .h1.

Then you will get the result you are after:

#textinput2.h1 {
font-size: 36px;
line-height: 48px;
height: 48px;
}

=====

Alternative (more generic) solution

input[value~='.h1'] {
font-size: 36px;
line-height: 48px;
height: 48px;
}

This CSS will apply the styles to any input element in which the value attribute contains the word .h1. (You can adapt the trigger word, as needed).

Upvotes: 2

Related Questions