I have a rails 4 app using simple form.
I have a form input field called :content. It is a text field.
I want to be able to apply different styling to important parts of the text inside the content field, and to show links differently to text.
I tried making SCSS items as follows:
.intpol1 {
font-family: 'Roboto', sans-serif;
color: black;
font-size: 36px;
text-align:left;
line-height: 2;
}
.intpol2 {
font-family: 'Roboto', sans-serif;
color: black;
font-size: 26px;
text-align:left;
line-height: 1.5;
}
.intpol3 {
font-family: 'Roboto', sans-serif;
color: black;
font-size: 16px;
text-align:left;
}
.intpollink {
font-family: 'Roboto', sans-serif;
color: black;
font-size: 16px;
text-align:left;
color: #E50851;
}
And then in my form, I try applying them as follows:
<div class="intpol1"> Test</div> <div class="intpol3"> Test3</div> <div class="intpol2"> Test2</div> <div class="intpollink"> Testlink</div>
What I was hoping to achieve was the CSS styling would apply to the text fields instead of rendering the div tags in the html output.
Is there a way of making a form input field so that its possible to use CSS on segments of the form content?
Unfortunately, that's not possible. You can't place any child elements inside <input>
. To achieve something like this you need to use multiple <input>
elements, and style each one of them.