CSS Floating Labels Not Working in Edge or IE

Question

I am trying to figure out how to get this code to work in IE and Edge. It works perfectly in Chrome and Firefox and looks good too. I understand that it may deal with browser support for :placeholder-shown but I am not sure and can't figure it out. Obviously if you run it in Edge the labels don't float up and when you type it just appears on top of the label. Here is the code I am using if anyone can help:

Here is the original source: https://jsfiddle.net/7z8q4pyd/

CSS

:root {
  --input-padding-x: .75rem;
  --input-padding-y: .75rem;
}

.form-signin {
  width: 100%;
  padding: 15px;
  margin: 0 auto;
}

.form-label-group {
  position: relative;
  margin-bottom: 1rem;
}

.form-label-group > input,
.form-label-group > label {
  padding: var(--input-padding-y) var(--input-padding-x);
}

.form-signin select{
      display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
}

.form-label-group > label {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  margin-bottom: 0; /* Override default `<label>` margin */
  line-height: 1.5;
  color: #495057;
  border: 1px solid transparent;
  border-radius: .25rem;
  transition: all .1s ease-in-out;
}

.form-label-group input::-webkit-input-placeholder {
  color: transparent;
}

.form-label-group input:-ms-input-placeholder {
  color: transparent;
}

.form-label-group input::-ms-input-placeholder {
  color: transparent;
}

.form-label-group input::-moz-placeholder {
  color: transparent;
}

.form-label-group input::placeholder {
  color: transparent;
}

.form-label-group input:not(:placeholder-shown) {
  padding-top: calc(var(--input-padding-y) + var(--input-padding-y) * (2 / 3));
  padding-bottom: calc(var(--input-padding-y) / 3);
}

.form-label-group input:not(:placeholder-shown) ~ label {
  padding-top: calc(var(--input-padding-y) / 3);
  padding-bottom: calc(var(--input-padding-y) / 3);
  font-size: 12px;
  color: #777;
}

HTML

<form class="form-signin" action="" method="post">

          <div class="row">
            <div class="col-xs-12 col-md-6">
              <div class="form-label-group">
                <input type="text" name="fullname" id="inputName" class="form-control" placeholder="Full Name" required >
                <label for="inputName">Full Name</label>
              </div>
            </div>
           </div>
....
</form>

Investigate a [Polyfill](https://github.com/jhildenbiddle/css-vars-ponyfill) - [this answer](https://stackoverflow.com/a/49203834/11700321) has a bit more detail that perhaps is the root of your issue — EGC, Jan 08 '20 at 23:38
Thanks. found out the complicated calc(var(--input-padding-y) / 3) can be simply replaced with top: -10px and achieve the same effect that is compatible in Edge. Your comment sent me off in the right direction to find out the issue. — Joshua Olds, Jan 09 '20 at 02:57

score 0 · Answer 1 · answered Jan 09 '20 at 02:59

I replaced the last two css styles with this and it achieves the same effect that works in all browsers.

.form-label-group input:not(:placeholder-shown) ~ label {
  top: -13px;
  font-size:12px;
}

.form-label-group input:focus + label{
  top: -13px;
  font-size:12px;
}

input:valid + label {
  top: -13px;
  font-size:12px; 
}

CSS Floating Labels Not Working in Edge or IE

1 Answers1