How can i target valid on phone number for this case?

Question

well i tried to create a form where i'm facing problem in assigning valid value to phone no. field . What i want is to keep the label translated by -20px and color of blue when focussed and also valid. Kindly have a look and let me know where can i improvise to get the desired result. Link to my work https://codepen.io/TA0011/pen/GRGQBQK

.input-data input{
  display: block;
    height:  100%;
    width: 10%;
    border: none;
    outline: none;
    font-size: 17px;
    border-bottom: 2px solid rgba(0,0,0,.12);
}
input.phone-input:focus ~ .phone-label label,
input.phone-input:valid ~ .phone-label label{
  transform:  translateY(-20px);
    color: #3498db;
    font-size: 14px;
    transition: all 0.3s ease;
} 
 .input-data .phone-select{
    margin:0;
    width:55px !important;
    display: inline-block !important;
    font-family: 'Roboto', sans-serif !important;
 }
 .input-data .phone-label label{
   left: 60px
}
.input-data .phone-input{
    display: inline-block !important;
}

<div class="input-data">
                <select class="phone-select">
                    <option>+91</option>
                    <option>+92</option>
                </select>

                <input class="phone-input" type="text">
                <div class="underline"></div>
                <div class="phone-label">
                    <label>Phone No.</label>
                </div>
            </div>

score 1 · Accepted Answer · answered Nov 25 '22 at 08:17

label is usually inline element by default, and CSS transforms apply only to some inline elements, see https://stackoverflow.com/a/14883287/1722529

So, just add display: inline-block; (or block, if it suits you) to your label styles to apply the -20px transform to it.

Also note that your input, as shown in the example code, is currently always valid. Try adding pattern (MDN), required (MDN) attributes to it.

.input-data input{
  display: block;
    height:  100%;
    width: 10%;
    border: none;
    outline: none;
    font-size: 17px;
    border-bottom: 2px solid rgba(0,0,0,.12);
}
input.phone-input:focus ~ .phone-label label,
input.phone-input:valid ~ .phone-label label{
  transform:  translateY(-20px);
    display: inline-block;
    color: #3498db;
    font-size: 14px;
    transition: all 0.3s ease;
} 
 .input-data .phone-select{
    margin:0;
    width:55px !important;
    display: inline-block !important;
    font-family: 'Roboto', sans-serif !important;
 }
 .input-data .phone-label label{
   left: 60px
}
.input-data .phone-input{
    display: inline-block !important;
}

<div class="input-data">
                <select class="phone-select">
                    <option>+91</option>
                    <option>+92</option>
                </select>

                <input class="phone-input" type="text" required>
                <div class="underline"></div>
                <div class="phone-label">
                    <label>Phone No.</label>
                </div>
            </div>

How can i target valid on phone number for this case?

1 Answers1