在 CSS 中更改输入的大小答案

【问题标题】：Changing size of input in CSS在 CSS 中更改输入的大小
【发布时间】：2020-11-05 14:11:27
【问题描述】：

是否可以使用 HTML 更改输入的宽度？我有 size="35" 并且在网站( check here(bottom of site)) 上一切正常，直到我开始为移动设备编写代码。现在，35 号的尺码很宽，我不知道我还能怎么让它看起来一样。在移动版本上，我想在 flex-direction: column 我做错了什么？

我试过这样的

input [type=text] {
width: 60%;}

但由于某种原因，它只交替了我的两个输入框 o_O

谢谢

.bcs_za_form {
    width: 100%;
    background-color: #646C8E;
    height: 790px;
}

.textnadform {
    padding-top: 50px;
    text-align: center;
    font-size: 35px;
    color: #ffffff;
    width: 100%;
    font-family: 'Montserrat',Helvetica,Arial,Lucida,sans-serif;
}

.zanech {
    font-size: 17px;
    color: rgba(255,255,255,0.5);
    font-weight: 600;
}

.celyform {
    width: 100%;
}

.formular_2 {
    padding-top: 50px;
    display: flex;
    justify-content: center;

}

.formular_4 {
    border: 1px solid #ffffff;
    font-family: 'Montserrat',Helvetica,Arial,Lucida,sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: white;
    background-color: #646C8E;
    padding-top: 25px;
    padding-right: 30px;
    padding-bottom: 25px;
    padding-left: 30px;
    border-radius: 10px;
}

.formular_4::placeholder {
    color: #ffffff;
}

.prvedva {
    margin-bottom: 1%;
    flex-grow: inherit;
    display: flex;
    width: 100%;
}

.druhedva {
    margin-bottom: 3%;
    flex-grow: inherit;
    display: flex;
    width: 100%;
}

.druhy {
    padding: 0px 0px 0px 20px;
}

.stvrty {
    padding: 0px 0px 0px 20px;
}

input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}

textarea:focus ,
input:focus {
    color: #3E3E55;
}

<div class="bcs_za_form" id="Kontakt">

    <div class="celyform">
        <div class="textnadform">
            <p class="napismi">Kontaktujte Ma</p>

            <p class="zanech">Zanechajte mi odkaz a ja sa vám budem čo najskôr venovať.</p>
        </div>
  
            <div class="formular_2">
                <form class="formular_3" action="kontakt.php" method="post">
                    <div class="prvedva">
                        <input class="formular_4" type="text" name="meno" placeholder="Meno" size="35">
                    <div class="druhy"> 
                        <input class="formular_4" type="text" name="priezvisko" placeholder="Priezvisko" size="35">
                    </div> 
                    </div>
                        <br>
                    <div class="druhedva">
                    
                        <input class="formular_4" type="text" name="telcislo" placeholder="Tel. číslo" size="35">
                    <div class="stvrty">
                        <input class="formular_4" type="text" name="mail" placeholder="Váš E-mail" size="35">
                    </div>
                        <br>
                </div>
                    <div class="">
                        <textarea class="formular_4" name="sprava" placeholder="Správa" cols="85" rows="8"></textarea>
                    </div>
                </form>
            </div>

【问题讨论】：

您可以使用 Bootstrap 使其具有响应性； getbootstrap.com/docs/4.0/components/forms
@barbaart 这将是有用的站点，如果添加了任何 css，我需要该 css
你不需要，我会在几秒钟内回答你的问题。

标签： html css forms input

【解决方案1】：

表单中有一些奇怪的 div 嵌套，导致仅调整 2 个字段的大小。

我注意到您的表单宽度在调整大小时超出了容器。您可以将表单包装在一个 div 中并设置一个最大宽度，这样它就不会像这样溢出父容器：

.form-container{
max-width: 100%;
}

更新代码：

<html lang="en">

<head>
    <meta content="width=device-width, initial-scale=1" name="viewport" />
    <title>form</title>
    <style>
        .bcs_za_form {
            width: 100%;
            background-color: #646C8E;
            height: 790px;
        }
        
        .textnadform {
            padding-top: 50px;
            text-align: center;
            font-size: 35px;
            color: #ffffff;
            width: 100%;
            font-family: 'Montserrat', Helvetica, Arial, Lucida, sans-serif;
        }
        
        .zanech {
            font-size: 17px;
            color: rgba(255, 255, 255, 0.5);
            font-weight: 600;
        }
        
        .celyform {
            width: 100%;
        }
        
        .formular_2 {
            padding-top: 50px;
        }
        
        .formular_4 {
            border: 1px solid #ffffff;
            font-family: 'Montserrat', Helvetica, Arial, Lucida, sans-serif;
            font-weight: 600;
            font-size: 14px;
            color: white;
            background-color: #646C8E;
            padding-top: 25px;
            padding-right: 30px;
            padding-bottom: 25px;
            padding-left: 30px;
            border-radius: 10px;
            margin: 10px;
        }
        
        .formular_4::placeholder {
            color: #ffffff;
        }
        
        .formular_3 {
            display: flex;
            flex-direction: column;
        }
        
        .prvedva {
            margin-bottom: 1%;
            flex-grow: inherit;
            display: flex;
            width: 100%;
        }
        
        .druhedva {
            margin-bottom: 3%;
            flex-grow: inherit;
            display: flex;
            width: 100%;
        }
        
        .druhy {
            padding: 0px 0px 0px 20px;
        }
        
        .stvrty {
            padding: 0px 0px 0px 20px;
        }
        
        input:focus,
        select:focus,
        textarea:focus,
        button:focus {
            outline: none;
        }
        
        textarea:focus,
        input:focus {
            color: #3E3E55;
        }
        
        .section {
            display: flex;
            width: 100%;
        }
        
        input.formular_4 {
            -webkit-flex: 1 2 auto;
            -moz-flex: 1 2 auto;
            -ms-flex: 1 2 auto;
            -o-flex: 1 2 auto;
            flex: 1 2 auto;
            margin: 10px;
        }
        
        .form-container {
            max-width: 100%;
            width: 100%;
        }
        
        @media only screen and (max-width: 520px) {
            .section {
                flex-direction: column;
            }
        }
    </style>
</head>

<body>
    <div class="bcs_za_form" id="Kontakt">
        <div class="celyform">
            <div class="textnadform">
                <p class="napismi">Kontaktujte Ma</p>
                <p class="zanech">Zanechajte mi odkaz a ja sa vám budem čo najskôr venovať.</p>
            </div>
            <div class="form-container">
                <div class="formular_2">
                    <form class="formular_3" action="kontakt.php" method="post">
                        <div class="section">
                            <input class="formular_4" type="text" name="meno" placeholder="Meno">
                            <input class="formular_4" type="text" name="priezvisko" placeholder="Priezvisko"> </div>
                        <div class="section">
                            <input class="formular_4" type="text" name="telcislo" placeholder="Tel. číslo">
                            <input class="formular_4" type="text" name="mail" placeholder="Váš E-mail"> </div>
                        <textarea class="formular_4" name="sprava" placeholder="Správa" cols="85" rows="8"></textarea>
                    </form>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

我省略了 size="35" 属性，您可以根据需要添加该属性，并使用 flex 来调整字段的大小。另一种方法是将输入设置为例如。 48%，但您必须手动计算边距。

您不需要引导程序，但如果需要，您可以使用该库，就一致性而言，它可以帮助您使一切看起来一致。

【讨论】：

哇，它的工作原理，但是当涉及到责任时，我需要改变什么来使输入框的宽度更小？当我将分辨率裁剪到 500 以下时，输入框的宽度太大，我希望它们占屏幕的 100%
@MariánJackovič 你能解释一下太大是什么意思吗？你想要他们 100% 即。全角？
我已更新代码以在小屏幕上包含全宽（最大宽度：520px）..
imgup.cz/image/k1dG 不，没有任何改变。
@MariánJackovič 你能不能再复制一遍并刷新浏览器

【解决方案2】：

你试过用这样的东西吗？

   @media only screen and (max-width: 600px) {
  .formular_4 {
    size: 20;
  }
}

到最大宽度你写你需要的屏幕像素大小，这意味着每个小于600像素的屏幕都会依赖。

【讨论】：

不，不工作，没有任何改变，我认为我需要改变确定盒子大小的方式，我在 hmtl 中覆盖了该大小
然后尝试从html中删除大小并在css中指定它的高度/宽度，也许它只是从HTML中获取大小而忽略css
我发现任何浏览器都不支持css中的大小，所以我猜不是这样developer.mozilla.org/en-US/docs/Web/CSS/@page/size
然后使用 height 和 widht 指定输入的大小。实际上我从来没有使用过尺寸，现在我知道为什么它不流行了：D 在 CSS 中指定所有尺寸 atc，我认为没有理由在 html 中使用它

【解决方案3】：

我为您的表单添加了一些引导程序，以使其更具响应性。希望这会奏效，请参阅 sn-p：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">    

</head>
<body>
<div class="container">
  <form class="formular_3" action="kontakt.php" method="post">
    <div class="prvedva form-group">
        <input class="formular_4 form-control" type="text" name="meno" placeholder="Meno" size="35">
    </div>

    <div class="druhy form-group"> 
        <input class="formular_4 form-control" type="text" name="priezvisko" placeholder="Priezvisko" size="35">
    </div> 

    <div class="druhedva form-group">
        <input class="formular_4 form-control" type="text" name="telcislo" placeholder="Tel. číslo" size="35">
    </div>
    <div class="stvrty form-group">
        <input class="formular_4 form-control" type="text" name="mail" placeholder="Váš E-mail" size="35">
    </div>

    <div class="form-group">
        <textarea class="formular_4 form-control" name="sprava" placeholder="Správa" cols="85" rows="8"></textarea>
    </div>
  </form>
</div>

</body>
</html

欲了解更多信息，请参阅docs

【讨论】：

它看起来像它的工作，但我不明白它是如何工作的：P 我怎样才能将它仅用于媒体查询？比如@media screen and (max-width:500px) ?
我该如何改变它？我完全不明白
这个引导表单使所有内容都可调整大小/响应，因此您不需要对其进行媒体查询，这很棒，因为您现在不需要编写很多行 css。我建议您查看一些引导教程 :)
但是当我将此代码添加到我的网站时，我无法自定义我的表单并且整个部分都被破坏了：P
如果您在的引导链接下添加自己的 custom.css 文件，则可以覆盖引导