How to increase only font-size of the text inside the text box on hover

Question

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 also along with text. I know what i have done but I don't know how to do. I want to increase only text size not text field please help me.

Thanks in advance...

my code...

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

<input class="chandru" name="chandru" value="Hai hello">

do you NEED to use value ? or you can use placeholder for example ? — Mihai T, Oct 13 '16 at 07:40

score 1 · Answer 1 · answered Oct 13 '16 at 07:35

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; 
 }

<input type="text" class="myinput" value="Test">

answered Oct 13 '16 at 07:35

Alexis

5,681
1
27
44

score 1 · Answer 2 · answered Oct 13 '16 at 08:27

1

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;
            }

<input class="chandru" name="chandru" value="Hai hello"/>

answered Oct 13 '16 at 08:27

pd91

41
5

see in your code it will not come outside the text field, it is hide. What i want it should come out side the text field – MogerCS Oct 13 '16 at 14:12

score 0 · Answer 3 · answered Oct 13 '16 at 07:36

0

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
}

<input class="chandru" name="chandru" value="Hai hello">

answered Oct 13 '16 at 07:36

Robbin van der Jagt

796
4
15

but here if u give font-size more it will hide because of height and width of the text field.. – MogerCS Oct 13 '16 at 07:42
But you said you didn't want the textfield to become bigger – Robbin van der Jagt Oct 13 '16 at 07:45
That's *exactly* what you asked for - or you could start with a bigger textbox ofc – freedomn-m Oct 13 '16 at 08:25

score 0 · Answer 4 · answered Oct 13 '16 at 08:22

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: 6px 10px;
}
.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;
}

<input class="chandru" name="chandru" value="Hai hello" />

<br/><br/><br/>

<input class="chandru1" name="chandru" value="Hai hello" />

How to increase only font-size of the text inside the text box on hover

4 Answers4

Linked