CSS overflow:visible doesn't seem to get applied to inputs.
See the following JS fiddle: https://jsfiddle.net/b4sr578j/
input {
border: 1px dashed black;
overflow: visible;
height: 28px;
font-size: 30px;
}<input type='text' value='gggyyyXXX'/>Is it possible to make the bottom of the gs and ys visible (without increasing the height of the text input)?
Thanks for any help.
On
To make it short: No this is not possible! The only thing what you could do is to create a javascript/html/css replacement for an input. But this would be an overhead.
To get an idea:
On
(This won't work in IE - because it doesn't support outline-offset)
1) Remove the height
2) Use outline instead of border
3) Add a negative outline-offset
4) Add padding to fine tune the offset
input {
overflow: visible;
font-size: 30px;
outline: 1px dashed black;
border: 0;
outline-offset: -8px;
padding: 6px 0 2px 8px;
}<input type='text' value='gggyyyXXX' />Use Contenteditable
const editorElement = document.getElementById("editor");
editorElement.addEventListener("input", function(event) {
console.log("value: ", editorElement.innerText );
}, false);<div contenteditable="true" id="editor">Please type something in here</div>Use negative Margins on top and Bottom To prevent the text from overflowing the input:
input {
display: block;
margin-top: -5px;
margin-bottom: -25px;
height: 30px;
}<div>Content before</div>
<input type="text" value="input Value"/><br>
<div>Content after</div>More of a workaround really, but why not absolutely position an input with no border over the top?
body {
position:relative;
}
input {
border: 1px dashed black;
overflow: visible;
height: 28px;
font-size: 30px;
}
input.noborder {
border:1px transparent solid;
height:34px;
position:absolute;
left:0;
background:transparent;
}<input type='text' value=''/>
<input class="noborder" type='text' value='gggyyyXXX'/>
Answer to the original question - As indicated already by Sebastian Hens, this is not possible. The reason is because
inputelements are replaced elements and the overflow property applies only to non-replaced elements.As already mentioned in comments, the ideal solution would be to make use of
contenteditableelements because they do respect theoverflowsettings.Here is a workaround solution which uses multiple
linear-gradientto generate the dashed border effect. Part of the answer is adopted from Danield's answer (the parts aboutpaddingand removal ofheight). On top of it, I have modified theappearanceand added the gradients.Though we haven't added the height explicitly, the actual height of the area within the border would still be the same as that in your original code. I have added an input box with your original code on the left side for comparison. I don't know if that is acceptable for you. If you mandatorily want the
heightto be set then this would not work.In the above snippet a white
box-shadowis used to hide the bottom part of the gradient so that it doesn't overflow (you can see the effect by removing thebox-shadow) and because of this it needs a solid color background. On the other hand if the height of your text box is fixed then you could use something like the below snippet to even support non solid backgrounds.This approach is tested in Chrome, Firefox, Opera and IE11. Because gradients is supported in IE10, it should work fine there also but would not work with any of the lower versions as they don't support gradients.