Question

我将无法在不增大文本框的情况下增大此文本框的字体大小，是否有帮助？：） https://imgur.com/a/96frxvS，我的CSS代码在下面，对您有帮助。（box是包含元素的表单的类）

.box input[type = 'text'], .box input[type = 'password'] {
    border: 0;
    background: none;
    margin: 40px auto;
    text-align: center;
    display: block;
    border: 4px solid #70abff;
    padding: 28px 20px;
    width: 400px;
    outline: none;
    color: white;
    border-radius: 30px;
    transition: 0.25s;
    font-family: 'Gill Sans MT';
    background: #191919;

Answer 1

您的CSS遵守您的填充规则，并使比例与您的说明一致。为了防止盒子变大，您必须设置一个固定的高度并删除填充规则。

.box input[type='text'],
.box input[type='password'] {
  border: 0;
  background: none;
  margin: 40px auto;
  text-align: center;
  display: block;
  border: 4px solid #70abff;
  /*   padding: 28px 20px; */  /* <-- removed */
  width: 400px;
  height: 50px;                /* <-- fixed height */
  outline: none;
  color: white;
  border-radius: 30px;
  transition: 0.25s;
  font-family: 'Gill Sans MT';
  background: #191919;
  font-size: 100%;
}

.box.larger input[type='text'],
.box.larget input[type='password'] {
  font-size: 200%;
}

<div class="box">
  <input type="text" value="something">
</div>

<div class="box larger">
  <input type="text" value="something">
</div>

jsFiddle

Answer 2

在尝试达到特定高度时，指定高度的所有组成部分很重要。您要指定padding和border，但不能指定font-size或line-height。

总高度为border + padding + line-height。 font-size将控制文本的实际大小，并且应小于或等于line-height。

您的原始输入大约高80像素：

16像素线高
56px填充
8像素边框

我们可以在不改变整体高度的情况下重新分配它：

顶部和底部边框为8px
行高为24px（示例）
剩余48px用于填充

input[type='text'] {

  
  /* new/modified code */

  font-size: 20px;
  line-height: 24px;
  padding: 24px 20px;

  /* other properties */

  background: none;
  margin: 40px auto;
  text-align: center;
  display: block;
  border: 4px solid #70abff;
  width: 400px;
  outline: none;
  color: white;
  border-radius: 30px;
  transition: 0.25s;
  font-family: 'Gill Sans MT';
  background: #191919;
}

<input type=text value="Sample Text Value">

如何在不增大父输入元素的情况下增大字体大小？

2 个答案: