时间戳

首页 > 解决方案 > 调整表单大小、输入文本和字体高度时出现问题

html - 调整表单大小、输入文本和字体高度时出现问题

问题描述

我在尝试调整表单高度、输入文本和字体时遇到了一些问题。我正在编写一个将显示在背景图像中的表单，并且我正在尝试在该图像中调整表单大小。但他并没有改变他的身高。我不知道我该怎么做，我已经尝试了很多谷歌和堆栈溢出的东西，但没有任何效果。

    body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        height: 100%;
        width: 100%;
    }
    
    .inner {
        float: left;
        width: 600px;
        height: 410px;
    }
    
    .jright {
        background: url("../img/visa_erased.png");
    }
    
    form {
        float: right;
        width: 40%;
        padding-top: 80px;
    }
    
    .input-field {
        box-sizing: border-box;
        color: #000000 !important;
    }
    
    #register {
        height: auto;
        width: 30%;
        padding: 1;
        background: #392c34 !important;
    }
    
    .dropdown-content {
        top: 0 !important;
    }
    
    .select-wrapper li {
        background: #b5a795 !important;
    }
    
    .select-wrapper li span {
        color: #ffffff !important;
    }
    
    .select-wrapper .disabled {
        background: #897d6e !important;
    }
    
    .select-wrapper .selected {
        background: #d6c7b3 !important;
    }
    
    .datepicker-date-display {
        background: #392c34;
    }
    
    .datepicker-container button {
        color: #392c34;
    }
    
    .datepicker-container button:focus {
        background: none;
    }
    
    .datepicker-container .is-selected {
        background: #7a5f70 !important;
    }
    
    .dropdown-content li>a,
    .dropdown-content li>span {
        color: #392c34 !important;
    }
    
    .datepicker-container input {
        color: #392c34 !important;
    }
    
    label {
        color: #392c34 !important;
        text-shadow: -1px 0 rgba(0, 0, 0, 0.2), 0 1px rgba(0, 0, 0, 0.2), 1px 0 rgba(0, 0, 0, 0.2), 0 -1px rgba(0, 0, 0, 0.2);
    }
    
    .input-field input[type=text] {
        border-bottom: 1px solid #392c34 !important;
        box-shadow: 0 1px 0 0 #392c34 !important;
    }
    
    .input-field input[type=text]:focus+label {
        color: #6b0742 !important;
    }
    
    .input-field input[type=text]:focus {
        border-bottom: 1px solid #6b0742 !important;
        box-shadow: 0 1px 0 0 #6b0742 !important;
    }
    
     ::-webkit-scrollbar {
        width: 0px;
        background: transparent;
    }
    
     ::-webkit-scrollbar-thumb {
        background: #FF0000;
    }
    
    @media only screen and (max-width: 1250px) {
        .container {
            width: 100% !important;
        }
    }
 <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <link rel="stylesheet" href="css/style.css" type="text/css">
        <link rel="stylesheet" href="css/materialize.css" type="text/css">
        <script src="nui://game/ui/jquery.js" type="text/javascript"></script>
    </head>
    
    <body>
        <div class="container">
            <div class="row">
                <div class="inner jright">
                    <form>
                        <div class="input-field">
                            <input id="firstname" name="firstname" placeholder="" type="text" required>
                            <label for="firstname">1. Nome</label>
                        </div>
                        <div class="input-field">
                            <input id="lastname" placeholder="" type="text" required>
                            <label for="lastname">2. Sobrenome</label>
                        </div>
                        <div class="input-field">
                            <input id="height" placeholder="" type="text" maxlength="3" minlength="2" required>
                            <label for="height">3. Altura (CM)</label>
                        </div>
                        <div class="input-field">
                            <input id="dateofbirth" placeholder="" type="text" class="datepicker" required>
                            <label for="dateofbirth">4. Aniversário (DD-MM-YYYY)</label>
                        </div>
                        <div class="input-field" id="sex">
                            <select data-beloworigin="true" required>
                                  <option value="none" disabled selected>Escolha o gênero</option>
                                  <option value="M">Masculino</option>
                                  <option value="F">Feminino</option>
                                </select>
                            <label>5. Sexo</label>
                        </div>
                        <button id="register" class="btn btn-large waves-effect">OK</button>
                    </form>
                </div>
            </div>
        </div>
        <script src="js/jquery.js" type="text/javascript"></script>
        <script src="js/materialize.js" type="text/javascript"></script>
        <script src="js/init.js" type="text/javascript"></script>
    </body>
    
    </html>

标签： htmlcss

解决方案

这是w3school的一个示例，它在背景中的图像上显示了一个制作精良的表格。

看看下面的代码片段。

body, html {
  height: 100%;
  font-family: Arial, Helvetica, sans-serif;
}

* {
  box-sizing: border-box;
}

.bg-img {
  /* The image used */
  background-image: url("https://www.w3schools.com/howto/img_nature.jpg");

  min-height: 380px;

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

/* Add styles to the form container */
.container {
  position: absolute;
  right: 0;
  margin: 20px;
  max-width: 300px;
  padding: 16px;
  background-color: white;
}

/* Full-width input fields */
input[type=text], input[type=password] {
  width: 100%;
  padding: 15px;
  margin: 5px 0 22px 0;
  border: none;
  background: #f1f1f1;
}

input[type=text]:focus, input[type=password]:focus {
  background-color: #ddd;
  outline: none;
}

/* Set a style for the submit button */
.btn {
  background-color: #4CAF50;
  color: white;
  padding: 16px 20px;
  border: none;
  cursor: pointer;
  width: 100%;
  opacity: 0.9;
}

.btn:hover {
  opacity: 1;
}
<body>

<h2>Form on Hero Image</h2>
<div class="bg-img">
  <form action="/action_page.php" class="container">
    <h1>Login</h1>

    <label for="email"><b>Email</b></label>
    <input type="text" placeholder="Enter Email" name="email" required>

    <label for="psw"><b>Password</b></label>
    <input type="password" placeholder="Enter Password" name="psw" required>

    <button type="submit" class="btn">Login</button>
  </form>
</div>

<p>This example creates a form on a responsive image. Try to resize the browser window to see how it always will cover the whole width of the screen, and that it scales nicely on all screen sizes.</p>

</body>

现在，让我们根据您的需要修改代码段（如您的问题中所述）。

[注意样式标签的变化]

  1. 改变表格的高度。（高度属性）
  2. 更改输入文本大小。（字体大小属性）
  3. 更改输入文本字体。（字体系列属性）

body, html {
  height: 100%;
  font-family: Arial, Helvetica, sans-serif;
}

* {
  box-sizing: border-box;
}

.bg-img {
  /* The image used */
  background-image: url("https://www.w3schools.com/howto/img_nature.jpg");

  min-height: 380px;

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

/* Add styles to the form container */
.container {
  position: absolute;
  right: 0;
  margin: 20px;
  max-width: 300px;
  padding: 16px;
  background-color: white;
}

/* Full-width input fields */
input[type=text], input[type=password] {
  width: 100%;
  padding: 15px;
  margin: 5px 0 22px 0;
  border: none;
  background: #f1f1f1;
  height:10%;
  font-size:10px;
  font-family: monospace;
}

input[type=text]:focus, input[type=password]:focus {
  background-color: #ddd;
  outline: none;
}

/* Set a style for the submit button */
.btn {
  background-color: #4CAF50;
  color: white;
  padding: 16px auto;
  border: none;
  cursor: pointer;
  width: 100%;
  opacity: 0.9;
  height:10%;
  text-align:center;
}

.btn:hover {
  opacity: 1;
}

form{
  height:70%;
}

h2{
  margin-top:0px;
}

label{
  font-size:15px;
}
<body>

<h2>Form on Hero Image</h2>
<div class="bg-img">
  <form action="/action_page.php" class="container">
    <h2>Login</h2>

    <label for="email"><b>Email</b></label>
    <input type="text" placeholder="Enter Email" name="email" required>

    <label for="psw"><b>Password</b></label>
    <input type="password" placeholder="Enter Password" name="psw" required>

    <button type="submit" class="btn">Login</button>
  </form>
</div>

<p>This example creates a form on a responsive image. Try to resize the browser window to see how it always will cover the whole width of the screen, and that it scales nicely on all screen sizes.</p>

</body>

希望，这能让你对整个事情有所了解。

推荐阅读