CODEWITHSUNDEEP
htmlcssfocuscss-transitions
Shawn
Shawn

Reputation: 1675

input focus placeholder top not working on input readonly and placeholder

I have created a input box like these:

enter image description here

but when I use input box readonly it is not working. Here is my working snippet:

.myinput input:focus {
  outline: none;
}

.myinput {
  position: relative;
  width: 100%;
}

.myinput .inputText {
  width: 100%;
  outline: none;
  border: none;
  border-bottom: 1px solid #ccc;
  box-shadow: none !important;
  border-radius: unset !important;
}

.myinput .inputText:focus {
  border-color: #3399FF;
  border-width: medium medium 2px;
}

.myinput .floating-label {
  position: absolute;
  pointer-events: none;
  top: 25px;
  left: 0;
  transition: 0.2s ease all;
  color: #aaa;
}

.myinput input:focus~.floating-label,
.myinput input:not(:focus):valid~.floating-label,
.myinput input:not(:placeholder-shown):not(:focus):valid + .floating-label,{
  top: 0px;
  left: 0;
  font-size: 13px;
  opacity: 1;
  color: #3399FF;
}
<div class="myinput">
  <br>
  <input type="text" name="coupon" class="inputText" value="Test" placeholder="" readonly>
  <span class="floating-label">Enter Coupon Code</span>
</div>

When i removed required option from AddressLine2 input field it focused on top. See image below:

enter image description here

Want to fix the readonly and placeholder isseus!

Upvotes: 0

Views: 1195

Answers (2)

Ori Drori
Ori Drori

Reputation: 193057

Use the :read-only pseudo-selector to make the placeholder move to the top.

.myinput input:read-only + .floating-label

Note: you can replace the general sibling ~ combinator with the adjacent sibling + combinator, since the .floating-label comes right after the input.

Example:

.myinput input:focus {
  outline: none;
}

.myinput {
  position: relative;
  width: 100%;
}

.myinput .inputText {
  width: 100%;
  outline: none;
  border: none;
  border-bottom: 1px solid #ccc;
  box-shadow: none !important;
  border-radius: unset !important;
}

.myinput .inputText:focus {
  border-color: #3399FF;
  border-width: medium medium 2px;
}

.myinput .floating-label {
  position: absolute;
  pointer-events: none;
  top: 25px;
  left: 0;
  transition: 0.2s ease all;
  color: #aaa;
}

.myinput input:focus + .floating-label,
.myinput input:not(:placeholder-shown):not(:focus):valid + .floating-label,
.myinput input:read-only + .floating-label {
  top: 0px;
  left: 0;
  font-size: 13px;
  opacity: 1;
  color: #3399FF;
}
<div class="myinput">
  <br>
  <input type="text" name="coupon" class="inputText" value="Read Only" placeholder="" readonly>
  <span class="floating-label">Enter Coupon Code</span>
</div>

<div class="myinput">
  <br>
  <input type="text" name="coupon" class="inputText" placeholder="&nbsp;">
  <span class="floating-label">Enter Coupon Code</span>
</div>

Upvotes: 3

milad jamali
milad jamali

Reputation: 11

this is read only but the span tag below already takes that class and display over the input if you are trying to write this code as an component and using this in several places you should make it dynamic with javascript but if you are repeat this code every time you should change that classname of your span tag.

Upvotes: 0

Related Questions