Как увеличить размер шрифта только в текстовом поле при наведении

В моем случае у меня есть текстовое поле. на hover я хотел выделить текст (или увеличить размер шрифта только текста, а не текстового поля).Как увеличить размер шрифта только в текстовом поле при наведении

Что я пробовал, но это увеличивает текстовое поле и вместе с текстом. Я знаю, что я сделал, но Я не знаю, как это сделать. Я хочу, чтобы увеличить только размер текста не текстовое поле, пожалуйста, помогите мне.

заранее спасибо ...

мой код ...

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

источник

2016-10-13 Chandrashekhar

Таким образом, вы хотите, чтобы текст перекрываться выше размера фиксированного поля? – stormec56

Хорошо, отлично, только при наведении текстового поля. – Chandrashekhar

НУЖНО использовать значение? или вы можете использовать, например, местозаполнитель? –

Зафиксировав размер поля ввода. Изменяется только font-size.

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

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

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

источник

2016-10-13 07:35:07 Alexis

Вы можете сделать это так, это не выглядит самым хорошим, но это то, что вы просили.

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

источник

2016-10-13 07:36:11

, но вот если вы дадите размер шрифта больше, он скроется из-за высоты и ширины текстового поля. – Chandrashekhar

если он превышает размер текстового поля, он скроет ... – Chandrashekhar

Но вы сказали, что не хотите, чтобы текстовое поле стать больше –

вместо увеличения размера шрифта, почему бы не изменить цвет границы текстового поля таким образом, также и может подчеркнуть, что особое текстовое поле или с обоими

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

источник

2016-10-13 08:22:20 Rahul

Вы должны исправить высоту и ширину входного элемента чтобы увеличить размер шрифта.

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

источник

2016-10-13 08:27:35 pd91

, см. в вашем коде, он не будет выходить за пределы текстового поля, он скрыт. То, что я хочу, должно выйти из текстового поля – Chandrashekhar

Как увеличить размер шрифта только в текстовом поле при наведении

ответ

Смежные вопросы