Jump to content

Cross-browser font height

Rain Lover

Recommended Posts

As you see the outline is collapsed in the following sample:

var input = document.getElementById('input');
var output = document.getElementById('output');
input.addEventListener('input', function() {
  output.value = input.value;
output {
  display: block;
  font: 20px Arial;
  outline: 1px solid green;
<input id="input">
<output id="output"></output>


How can I prevent it? Do I need to give the output a fixed height? If so, what value should I give to the height if I want it to be just as high as the text height — not an arbitrary number? Is there a cross-browser solution?

Link to comment
Share on other sites

You can use a CSS pseudo-selector to put some fake content inside the output element to allow it to keep its height.

output::before {
  content: ".";
  display: inline-block;
  width: 0;
  overflow: hidden;


Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...