Right align form field text in only part of the form-CodePudding

I am working on a HTML form in which I need to right justify the text in the form field. I could accomplish this using the following css code "Input", but this right justifies the entire form, I need to just do one section of the form, I need the rest of the form to be left justified.

If I can find out how to put the "Input" CSS code "inline" with the form fields, that should work. I can't figure out how to do/format that.

<style>
      
      input {
     text-align: right;
      }

      
</style>

I have tried breaking the page into multiple html code blocks, that didn't help. it seemed whichever CSS code it reads last is what was applied to the entire page, not just the section it was set up for. I have exhausted google searches, there are plenty of solutions to right justify the field itself, I need the text inside the field to be right justified. In only part of the form.

Thanks in advance for any assistance.

CodePudding user response：

As per DenverCoder1 recommendation to:

Add class names to elements to make the selector more specific

Here is what I did to make it work. First I added the following code to CSS:

.rightjustify {
text-align: right;
}

And then adding the "rightjustify" class to the Input element, something like so:

<td style="text-align: right">BP: <input  
type="text" name="BP"></td>

The code is inside a table cell, hence the "td". Adding the style="text-align: right", sets the form field to be right justified in the table cell.

Then adding the "rightjustify" class to the input element, right justified the text inside the form field.