Menu
I'm trying to overlay text on an <input type="text"> (for cross-browser placeholder support). I've found that my positioning is always off by a couple of pixels, because of some kind of padding which can't be removed by setting padding: 0;. The suggestions here and here do not solve the problem.
You can see this padding in the following screenshot from Chrome, as the white space between the blue highlight and the yellow border:
How can I a) remove this space; or b) measure it using Javascript?
336
The break tag is meant for single line breaks, and not more than one in a row. If you want to add extra whitespace between pieces of text, use CSS padding and margins instead for cleaner code. Or, you can use an HTML <p> tag, as we'll see next.
Just add the col-xs-offset-2 class to your second input. This class adds margin-left to the element, and keep the horizontal line you need.
. height() does not include padding (even where box-sizing: border-box) . innerHeight() includes padding but not border.
Input value length You can specify a minimum length (in characters) for the entered value using the minlength attribute; similarly, use maxlength to set the maximum length of the entered value, in characters. The example below requires that the entered value be 4–8 characters in length.
If you replace the default borders with your own, the padding goes away (at least for me, on Chrome/Mac):
This is the CSS I used:
input {
padding: 0;
outline: none;
border: 1px solid red;
}
http://jsfiddle.net/NZZ5B/
181
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
