Как удалить CSS «Отступы шрифта» в полях ввода с высотой строки?
Я создал простое поле ввода:
<style>
input {
padding: 0;
margin: 0;
}
</style>
<input type = "text" placeholder = "Test">
Я хотел бы удалить «заполнение шрифта» (которое я пометил оранжевым). Я пытался манипулировать им с помощью высоты строки, но в моем случае я смог только увеличить «заполнение шрифта», а не уменьшить его. У кого-нибудь есть решение, как его уменьшить?
Поле ввода должно выглядеть так:
Спасибо за ваш ответ. Да, я знаю это. Однако в моем случае это поле ввода позволяет использовать только текст, так что это не имеет большого значения. Этот случай не вызовет. :)
но ÂÊjpq_ ЕСТЬ текст, а j, p, q - основные строчные буквы...
Правда жаль, что моя область очень особенная. Только абв-азбука :D
Ответы 3
Вы можете сделать это, зафиксировав высоту ввода. Но это сработает только в том случае, если у вас нет букв, которые выпрыгивают из базовой линии (j, y, g...). Если появится одна из этих букв, вам нужно будет настроить/увеличить высоту ввода с помощью Javascript.
Обратите внимание: я бы этого не сделал, но это решение вашего вопроса: D. Также вам понадобится код Javascript
input{
font-size: 100px;
padding: 0;
height: 70px;
margin-bottom: 100px;
}<input type = "text" placeholder = "Test">
<input type = "text" placeholder = "Tesyt">Спасибо! Я именно это и искал :)
Вы также можете попробовать обернуть ввод внутри метки inline-flex. align-items и overflow могут помочь:
возможный пример:
label input {
font-size: 1em;
border: none;
background: none;
color: green;
}
label {
height: 0.72em;
display: inline-flex;
border: inset 1px #555;
}
label,
input {
font-size: 25px;
vertical-align: middle;
}<label><input value = "Test clipped 123456"></label> <input value = "Test aside">Привет @G-Cyrillus. Ваш ответ потрясающий. Я также ответил на этот вопрос, но ваш код точен. Я определенно оцениваю его :) Если у вас есть время, посмотрите мой ответ и предложите улучшения. Спасибо :)
Я попробовал и придумал следующий трюк, используя чистый CSS: Это требует некоторых настроек в соответствии с требованиями.
body{
position:relative;
}
input{
border:none;
position:absolute;
outline:none;
top:0;
left:0;
height:29px;
width:200px;
background:none;
z-index:3;
}
label{
display: block;
height: 10px;
width: 200px;
border: 1px solid gray;
position: absolute;
left: 0;
top: 9px;
z-index: 3;
}<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width">
<title>JS Bin</title>
</head>
<body>
<label for = "mytext"></label>
<input type = "text" id = "mytext" value = "WE ARE HERE">
</body>
</html>привет, визуальное выглядит хорошо для меня, может быть, top:-0.1em или около того, чтобы немного компенсировать ввод сверху. метка может быть в position:relative вместо absolute, чтобы оставаться в потоке. input также может быть прямым дочерним элементом label, так что не беспокойтесь о том, чтобы сфокусировать ввод;)
Большое спасибо за ответ и дельные советы :)
попробуйте ввести этот текст
ÂÊjpq_и вы поймете зачем нужен этот пробел