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

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