Goal: In the current demo, theres a padding between the last word in the textarea field and the bottom border (the bottom border is realized through a "background" property).
Demo: https://jsfiddle.net/7vaf1th8/336/
Thats how it looks like (And its correct, thats exactly what I want!):
Problem: As soon as I focus into the textarea, hit Enter and type some characters in, the characters are far too low near the bottom border (because the padding-bottom gets ignored), it looks like this (Which is wrong):
I've tried to set a calc(100%+7px) background position, to keep the space / padding between the bottom border and the characters, but no attempt was successful.
How can I remain the padding / space between the text and the bottom border while typing? (without disregarding/loosing/deleting the "background" property (border on the bottom), because I need it?)
in the .form-group .form-control
you can change the padding to 0px and it will remove that extra: https://jsfiddle.net/7vaf1th8/349/
.form-group .form-control {
margin-bottom: 7px;
border: 0;
background-image: linear-gradient(#66bb6a, #66bb6a), linear-gradient(rgba(165, 181, 203, .5), rgba(165, 181, 203, .5));
background-size: 0 2px, 100% 1px;
background-repeat: no-repeat;
background-position: center bottom, center calc(100%);
background-color: transparent;
transition: background 0s ease-out;
float: none;
box-shadow: none;
border-radius: 0;
resize: none;
margin-top: 7px;
padding-top: 0 !important;
height: auto;
padding: 0px 0;
width: 100%;
color: #555;
display: block;
}
I've fixed it on my own now. Ive created a parent class for the parent element, changed the background propertys to this parent element and deleted it on the child(textarea) element.
Now the padding works as expected.
Note: It seems to be a fact, after reading similar questions, that padding is not working in webkit on textareas "as expected". It doesnt seem to be a bug, just the way webkit handles padding when the scrollbar starts to appear on the textarea.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.