GumbyFramework / Gumby

A Flexible, Responsive CSS Framework - Powered by Sass
http://gumbyframework.com/
2.85k stars 442 forks source link

Form field text-align #230

Open chip opened 10 years ago

chip commented 10 years ago

Hi, This is a really slick framework and I love working with it, so great job!

I have the following HTML and would like to right-justify the text inside the form field:

<input name="line_total" min="0" step="any" class="input line-total" value="4.00" type="number">

Here's what I tried which didn't work:

input[type="number"] {  
  text-align: right;
}

And here's what did work, but there's an issue:

.input.line-total {  
  text-align: right;
}

image

As you can see, the text is not fully in view. I've tried adding a padding-right, which solves the problem for this css selector, but have found that the padding required varies depending on the field size (or possibly because some of my other fields are using step attributes).

At any rate, I'm curious to know if there's a more consistent way to do this for all input fields, regardless of size or other attributes. I cannot find anything in the documentation and was hoping you could point me in the right direction.

Thanks again.