How To Increase Only Font-size Of The Text Inside The Text Box On Hover

In my case i have text field. on hover i wanted to highlight text (or increase the font-size of the only text not text box. what i have tried is, but this is increases text box als

Solution 1:

By fixing the size of input field. Only the font-size change.

.myinput{
  width:200px;
  height:20px;
  font-size:10px;
 }

.myinput:hover{
  font-size:15px; 
 }

<inputtype="text"class="myinput"value="Test">

Solution 2:

You have to fix the height and the width of the input element in order to only increase the font-size.

.chandru {
            font-size: 0.5em;
            position: absolute;
            height:20px;
            width:200px;
            transition: all 200ms ease-in-out;
        }

            .chandru:hover {
                font-size: 2.5em;
            }

<inputclass="chandru"name="chandru"value="Hai hello"/>

Solution 3:

You can do it like this, it doesn't look the nicest but it is what you requested.

.chandru {
	font-size: 0.5em;
	position: absolute;
   height: 10px;
     width:100px;
}
.chandru:hover {
	font-size: 1.5em;
  height: 10px
    width:100px
}

<inputclass="chandru"name="chandru"value="Hai hello">

Solution 4:

instead of increasing font-size why not to change border color of text box this way also u can highlight that particular text field or with both

.chandru{
  border: 1px solid #888;
  transition: border 0.8s ease;
  padding: 6px10px;
}
.chandru:hover {
  border: 1px solid blue;
}

.chandru1 {
  border: 1px solid #888;
  transition: border 0.8s ease;
  height: 50px;
  width: 200px;
  font-size: 14px;
}
.chandru1:hover {
  font-size: 16px;
  border: 1px solid blue;
}

<inputclass="chandru"name="chandru"value="Hai hello" /><br/><br/><br/><inputclass="chandru1"name="chandru"value="Hai hello" />