Rails CSS - different styles in a single generated text input field

Question

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?

Answer 1

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.