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

我将无法在不扩大文本框的情况下增大此文本框的字体大小，有什么帮助吗？ :) https://imgur.com/a/96frxvS，我的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;
    width: 400px;
    outline: none;
    color: white;
    border-radius: 30px;
    transition: 0.25s;
    font-family: 'Gill Sans MT';
    background: #191919;

最佳答案

您的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

关于html - 如何在不增大父输入元素的情况下增大字体大小？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/54682232/