For my bootstrap 4 web page implementation, I needed to create a user input form. While the built-in bootstrap input types functioned well, customizing the text input type caused issues in Internet Explorer 11. The typed text and placeholder didn't display properly, although it worked perfectly on other browsers and even in IE when the padding property was removed. Here's the code snippet that caused the problem:
The resulting output:
https://i.sstatic.net/EEYIy.png
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
<style>
.form-control-user {
border-radius: 10rem;
padding: 1.5rem 1rem;
}
</style>
<input type="text" class="form-control form-control-user" name="name" placeholder="E-mail" value="">