CSS3輸入框大小調(diào)整方法

在CSS3中，我們可以使用width和height屬性來(lái)調(diào)整輸入框的大小，以下是一些示例代碼，展示如何改變輸入框的寬度和高度：

示例1：調(diào)整寬度和高度

input {
  width: 200px;  /* 寬度調(diào)整為200像素 */
  height: 30px;  /* 高度調(diào)整為30像素 */
}

示例2：僅調(diào)整寬度

input {
  width: 300px;  /* 寬度調(diào)整為300像素 */
}

示例3：僅調(diào)整高度

input {
  height: 40px;  /* 高度調(diào)整為40像素 */
}

示例4：使用百分比調(diào)整寬度和高度

input {
  width: 50%;     /* 寬度調(diào)整為容器寬度的50% */
  height: 60%;    /* 高度調(diào)整為容器高度的60% */
}

示例5：使用em單位調(diào)整寬度和高度

input {
  width: 10em;   /* 寬度調(diào)整為10em（通常em等于當(dāng)前字體大?。?*/
  height: 2em;   /* 高度調(diào)整為2em */
}

示例6：使用vw和vh單位調(diào)整寬度和高度

input {
  width: 20vw;   /* 寬度調(diào)整為視口寬度的20% */
  height: 10vh;  /* 高度調(diào)整為視口高度的10% */
}

應(yīng)用示例：HTML表單中的輸入框大小調(diào)整

<form>
  <label for="name">姓名:</label>
  <input type="text" id="name" name="name" style="width: 200px; height: 30px;">
  <label for="email">郵箱:</label>
  <input type="email" id="email" name="email" style="width: 200px; height: 30px;">
  <label for="message">留言:</label>
  <textarea id="message" name="message" style="width: 200px; height: 100px;"></textarea>
</form>

在這個(gè)示例中，我們?yōu)樾彰?、郵箱和留言輸入框分別設(shè)置了不同的寬度和高度，使用CSS3的width和height屬性，我們可以輕松地調(diào)整輸入框的大小，以適應(yīng)不同的設(shè)計(jì)需求。