CODEWITHSUNDEEP
htmlcssinternet-explorerbootstrap-4
Pyae Phyo Aung
Pyae Phyo Aung

Reputation: 270

Padding of input type text does not show placeholder and typed text in IE 11 using bootstrap 4

I am implementing a web page using bootstrap 4. As one part, it is required to implement user input form. Although built-in bootstrap input types work fine, when trying to customize the input type text, it does not show the typed text and place holder in IE 11. It work fine in all other browsers and work fine in IE when I removed the padding property. Here are my code.

The output result

input type text

<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="">

Upvotes: 0

Views: 103

Answers (1)

Zhi Lv
Zhi Lv

Reputation: 21363

The issue is related to the padding style and rem unit. As we can see that the placeholder has disappeared, and when we enter a value using IE browser, we can't see the value.

To solve this issue, please try to refer to the following code to set the special style for the IE browser, or using px unit, instead of using rem.

<style>
    .form-control-user {
        border-radius: 10rem;
        padding: 1.5rem 1rem;
    }
    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
        /* IE10+ CSS */
        .form-control-user { 
            border-radius: 10rem;
            padding: 2px 1rem;
        }
    }
</style>

or 

<style>
    .form-control-user {
        border-radius: 10rem;
        padding: 2px 1rem;
    }
</style>

The result in the IE browser like this:

enter image description here

Besides, you could also set the height property, such as this:

    .form-control-user {
        height:4rem;
        border-radius: 10rem;
        padding: 1.5rem 1rem;
    }

The result as below:

enter image description here

Upvotes: 2

Related Questions