ホバー上のテキストボックス内のテキストのフォントサイズのみを増やす方法

Question

私の場合はテキストフィールドがあります。私はテキストを強調表示したい（または、テキストボックスではなく、唯一のテキストのフォントサイズを大きくしたい）

私が試したのはテキストです。私は。私は、テキストフィールドが私を助けてくださいだけでなく、テキストのサイズを大きくしたい行う方法を知りません。事前に

おかげで...

私のコード...

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

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

を

Answer 1

入力フィールドのサイズを固定します。 font-sizeのみが変更されます。

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

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

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

Answer 2

あなたはこのようにそれを行うことができ、それは素敵に見えませんが、それはあなたが要求したものです。代わりに増加フォントサイズの

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

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

Answer 3

テキストボックスの境界線の色を変更しない理由は、このようにもuは、その特定のテキストフィールドを強調表示し、またはその両方

.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" />

とすることができます

Answer 4

入力要素の高さと幅を固定する必要がありますフォントサイズを増やすにはntを使用します。

.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"/>