CODEWITHSUNDEEP
htmlcssfirefox
Chasen Bettinger
Chasen Bettinger

Reputation: 7454

On Input Focus, CSS Selector Doesn't Work in Firefox

The end goal is to move the label upon focus of the input field (like the material design inputs). In chrome, the fiddle works flawlessly.

<div class="row">
    <div 
        style="position: relative;">
        <div class="col-sm-12">
            <span class="fancy-wrapper">
                <input
                    name="name" type="text"
                    class="form-control &Control/class; login-input" 
                    />
                <label for="name" class="control-label login-label">
                    <span>a label</span>
                </label>
            </span>
        </div>
    </div>
</div>

.login-label {
  position: absolute;
  pointer-events: none;
  top: 12px;
  left: 30px;
  transition: 0.2s ease all;
  -moz-transition: 0.2s ease all;
  -webkit-transition: 0.2s ease all;
}

.login-input {
  height: 44px;
}

.login-input:focus {
  border-color: #ccc;
  box-shadow: none;
}

.fancy-wrapper > .login-input:focus ~ .login-label,
.fancy-wrapper > .login-input:valid ~ .login-label,
.fancy-wrapper > .login-input:-webkit-autofill ~ .login-label,
.fancy-wrapper > .login-input:focus ~ .control-label,
.fancy-wrapper > .login-input:valid ~ .control-label,
.fancy-wrapper > .login-input:-webkit-autofill ~ .control-label,
.fancy-wrapper > .login-input:focus ~ label,
.fancy-wrapper > .login-input:valid ~ label,
.fancy-wrapper > .login-input:-webkit-autofill ~ label,
.fancy-wrapper > .login-input:focus + *,
.fancy-wrapper > .login-input:valid + *,
.fancy-wrapper > .login-input:-webkit-autofill + *,
.fancy-wrapper > .login-input:focus + *,
.fancy-wrapper > .login-input:valid + *,
.fancy-wrapper > .login-input:-webkit-autofill + *,
.fancy-wrapper > .login-input:focus + *,
.fancy-wrapper > .login-input:valid + *,
.fancy-wrapper > .login-input:-webkit-autofill + *  {
  top: -10px;
  left: 29px;
  background-color: #fff;
  padding: 1px 4px;
  border-radius: 4px;
  margin-top: -2px;
}

https://jsfiddle.net/5tk70Ljx/

Upvotes: 1

Views: 785

Answers (2)

Bryce Howitson
Bryce Howitson

Reputation: 7690

Let's start with the fact that all those duplicate rules are overriding each other and you don't need them. Second, -webkit-autofill is only supported by SOME webkit browsers. Firefox is based on the Mozilla rendering engine so it's obviously not going to work. I would guess that Firefox hits that and ignores everything else.

The much easier solution to what you want is just using the adjacent sybling selector. AKA the Plus sign.

.myInputWrap {
    margin: 20px;
    position: relative;
    font-size: 14px;
    font-family: sans-serif;
}
input {
    padding: 2px;
    line-height: 1;
}
label {
    position: absolute;
    top:0; right:0; bottom:0; left:0;
    padding: 2px;
    line-height: 1;
    pointer-events: none;
    transition: transform 0.25s ease-in-out;
}
label span {
    background: white;
    display:inline-block;
    margin-left:2px;
    margin-top: 2px;
    color: #ddd;
}

input:focus + label,
input:valid + label{
    transform: translateY(-10px);
}
<div class="myInputWrap">
	<input type="text" required >
	<label for="">
		<span>Your Name</span>
	</label>
</div>

You'll need to play with positioning to get the label to start and end where you want it to. I added a span with a white background to make it look like the border gets hidden. You could simply place higher up and then not worry about a fake mask over the line.

Upvotes: 1

Chasen Bettinger
Chasen Bettinger

Reputation: 7454

I can't validate why, but this works if -webkit-autofill is not used in the selector.

Upvotes: 0

Related Questions