输入元素的底部边框被破坏

Question

I'm trying to create a form with input,textarea elements and everything works fine in normal mode and when we change the background-color to black and color to white (for dark mode) it appears a bit strange like below. The bottom edge is not visible at start. I'm not sure why this behavior exists. I have added to not allow user agent stylesheets default applied.

Remaining elements work as expected other than input elements.

These are the CSS styles applied

   input,textarea {
        width : 100%;
        border: 1px solid silver;
        padding-top: 10px;
        padding-bottom: 10px;
    }

.ncolor{
    color : black;
    background-color: white;
}

.nmcolor{
    color : white;
    background-color: black;
}

Below is the HTML snippet where we are applying the css file.

<form>
     <label class="nmcolor" htmlFor='Name'>Name : </label>
     <textarea rows="0" class="nmcolor" type='text'></textarea>
     <label class="nmcolor" htmlFor='Email'>Email : </label> 
     <input class="nmcolor" type='email'></input>
     <label class="nmcolor" htmlFor='Message'>Message : </label> 
     <textarea class="nmcolor" rows="20"></textarea>
     <button type="submit">Send</button>
   </form>

Answer 1

Can you share your code? This issue can have something to do with applied border-radius on your input element.

Answer 2

Thanks guys, Adding margin-bottom property for the input elements resolved the issue.

input,textarea {
    width : 100%;
    border: 1px solid silver;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-bottom: 3px;    /* this one */
}