Rain Lover Posted March 21, 2019 Share Posted March 21, 2019 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> DEMO 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 More sharing options...
Ingolme Posted March 21, 2019 Share Posted March 21, 2019 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 More sharing options...
dsonesuk Posted March 22, 2019 Share Posted March 22, 2019 Use :'empty' pseudo to give min-height if empty output:empty{min-height: 1em;} Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now