垦荒学园

简体中文

English

简体中文

English

切换主题

Foundation 输入框尺寸 ​

Foundation 提供了灵活的输入框尺寸控制。本章将介绍如何控制表单元素的大小。

默认尺寸 ​

Foundation 的输入框默认会占满容器宽度：

html
<input type="text" placeholder="默认宽度输入框">

使用网格控制宽度 ​

通过网格系统控制输入框宽度：

html
<div class="grid-x grid-margin-x">
    <div class="cell small-3">
        <input type="text" placeholder="25% 宽度">
    </div>
    <div class="cell small-6">
        <input type="text" placeholder="50% 宽度">
    </div>
    <div class="cell small-3">
        <input type="text" placeholder="25% 宽度">
    </div>
</div>

响应式宽度 ​

html
<div class="grid-x grid-margin-x">
    <!-- 小屏幕全宽，中等屏幕50%，大屏幕33% -->
    <div class="cell small-12 medium-6 large-4">
        <input type="text" placeholder="响应式宽度">
    </div>
</div>

输入框高度 ​

自定义高度 ​

html
<style>
    input.small-input {
        height: 2rem;
        padding: 0.25rem 0.5rem;
        font-size: 0.875rem;
    }
    input.large-input {
        height: 3.5rem;
        padding: 0.75rem 1rem;
        font-size: 1.25rem;
    }
</style>

<input type="text" class="small-input" placeholder="小号输入框">
<input type="text" placeholder="默认输入框">
<input type="text" class="large-input" placeholder="大号输入框">

输入框组尺寸 ​

html
<style>
    .input-group.small .input-group-label,
    .input-group.small .input-group-field,
    .input-group.small .button {
        height: 2rem;
        padding: 0.25rem 0.5rem;
        font-size: 0.875rem;
    }
    .input-group.large .input-group-label,
    .input-group.large .input-group-field,
    .input-group.large .button {
        height: 3.5rem;
        padding: 0.75rem 1rem;
        font-size: 1.25rem;
    }
</style>

<div class="input-group small">
    <span class="input-group-label">@</span>
    <input class="input-group-field" type="text" placeholder="小号">
    <div class="input-group-button">
        <button class="button" type="button">确定</button>
    </div>
</div>

<div class="input-group large">
    <span class="input-group-label">@</span>
    <input class="input-group-field" type="text" placeholder="大号">
    <div class="input-group-button">
        <button class="button" type="button">确定</button>
    </div>
</div>

文本域尺寸 ​

html
<!-- 通过 rows 控制高度 -->
<textarea rows="3" placeholder="3行高度"></textarea>
<textarea rows="6" placeholder="6行高度"></textarea>

<!-- 固定高度 -->
<textarea style="height: 200px;" placeholder="固定高度"></textarea>

<!-- 自适应高度 -->
<textarea style="resize: vertical; min-height: 100px;" placeholder="可调整高度"></textarea>

选择框尺寸 ​

html
<style>
    select.small-select {
        height: 2rem;
        padding: 0.25rem 0.5rem;
        font-size: 0.875rem;
    }
    select.large-select {
        height: 3.5rem;
        padding: 0.75rem 1rem;
        font-size: 1.25rem;
    }
</style>

<select class="small-select">
    <option>小号选择框</option>
</select>

<select>
    <option>默认选择框</option>
</select>

<select class="large-select">
    <option>大号选择框</option>
</select>

表单尺寸工具类 ​

创建统一的尺寸类：

html
<style>
    /* 小号表单元素 */
    .form-small input,
    .form-small select,
    .form-small textarea,
    .form-small .button {
        height: 2rem;
        padding: 0.25rem 0.5rem;
        font-size: 0.875rem;
    }

    /* 大号表单元素 */
    .form-large input,
    .form-large select,
    .form-large textarea,
    .form-large .button {
        height: 3.5rem;
        padding: 0.75rem 1rem;
        font-size: 1.25rem;
    }
</style>

<form class="form-small">
    <input type="text" placeholder="小号表单">
    <button class="button" type="submit">提交</button>
</form>

<form class="form-large">
    <input type="text" placeholder="大号表单">
    <button class="button" type="submit">提交</button>
</form>

完整示例 ​

html
<!DOCTYPE html>
<html class="no-js" lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Foundation 输入框尺寸示例</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/css/foundation.min.css">
    <style>
        .demo-section {
            margin-bottom: 40px;
            padding: 20px;
            background: #f8f8f8;
            border-radius: 4px;
        }
        .demo-section h3 {
            margin-bottom: 20px;
        }

        /* 尺寸类 */
        .input-small,
        select.input-small {
            height: 2rem !important;
            padding: 0.25rem 0.5rem !important;
            font-size: 0.875rem !important;
        }
        .input-large,
        select.input-large {
            height: 3.5rem !important;
            padding: 0.75rem 1rem !important;
            font-size: 1.25rem !important;
        }

        .input-group.small .input-group-label,
        .input-group.small .input-group-field,
        .input-group.small .button {
            height: 2rem;
            padding: 0.25rem 0.5rem;
            font-size: 0.875rem;
            line-height: 1.5rem;
        }
        .input-group.large .input-group-label,
        .input-group.large .input-group-field,
        .input-group.large .button {
            height: 3.5rem;
            padding: 0.75rem 1rem;
            font-size: 1.25rem;
            line-height: 2rem;
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <h1>Foundation 输入框尺寸展示</h1>

        <div class="demo-section">
            <h3>输入框高度</h3>
            <div class="grid-x grid-margin-x">
                <div class="cell medium-4">
                    <label>小号输入框</label>
                    <input type="text" class="input-small" placeholder="小号">
                </div>
                <div class="cell medium-4">
                    <label>默认输入框</label>
                    <input type="text" placeholder="默认">
                </div>
                <div class="cell medium-4">
                    <label>大号输入框</label>
                    <input type="text" class="input-large" placeholder="大号">
                </div>
            </div>
        </div>

        <div class="demo-section">
            <h3>网格控制宽度</h3>
            <div class="grid-x grid-margin-x">
                <div class="cell small-3">
                    <input type="text" placeholder="3列">
                </div>
                <div class="cell small-4">
                    <input type="text" placeholder="4列">
                </div>
                <div class="cell small-5">
                    <input type="text" placeholder="5列">
                </div>
            </div>
            <br>
            <div class="grid-x grid-margin-x">
                <div class="cell small-6">
                    <input type="text" placeholder="6列（50%）">
                </div>
                <div class="cell small-6">
                    <input type="text" placeholder="6列（50%）">
                </div>
            </div>
        </div>

        <div class="demo-section">
            <h3>选择框尺寸</h3>
            <div class="grid-x grid-margin-x">
                <div class="cell medium-4">
                    <label>小号选择框</label>
                    <select class="input-small">
                        <option>选项 1</option>
                        <option>选项 2</option>
                    </select>
                </div>
                <div class="cell medium-4">
                    <label>默认选择框</label>
                    <select>
                        <option>选项 1</option>
                        <option>选项 2</option>
                    </select>
                </div>
                <div class="cell medium-4">
                    <label>大号选择框</label>
                    <select class="input-large">
                        <option>选项 1</option>
                        <option>选项 2</option>
                    </select>
                </div>
            </div>
        </div>

        <div class="demo-section">
            <h3>输入框组尺寸</h3>
            <div class="grid-x grid-margin-x">
                <div class="cell medium-4">
                    <label>小号输入框组</label>
                    <div class="input-group small">
                        <span class="input-group-label">@</span>
                        <input class="input-group-field" type="text" placeholder="用户名">
                        <div class="input-group-button">
                            <button class="button" type="button">确定</button>
                        </div>
                    </div>
                </div>
                <div class="cell medium-4">
                    <label>默认输入框组</label>
                    <div class="input-group">
                        <span class="input-group-label">@</span>
                        <input class="input-group-field" type="text" placeholder="用户名">
                        <div class="input-group-button">
                            <button class="button" type="button">确定</button>
                        </div>
                    </div>
                </div>
                <div class="cell medium-4">
                    <label>大号输入框组</label>
                    <div class="input-group large">
                        <span class="input-group-label">@</span>
                        <input class="input-group-field" type="text" placeholder="用户名">
                        <div class="input-group-button">
                            <button class="button" type="button">确定</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="demo-section">
            <h3>文本域尺寸</h3>
            <div class="grid-x grid-margin-x">
                <div class="cell medium-4">
                    <label>3行高度</label>
                    <textarea rows="3" placeholder="3行"></textarea>
                </div>
                <div class="cell medium-4">
                    <label>5行高度</label>
                    <textarea rows="5" placeholder="5行"></textarea>
                </div>
                <div class="cell medium-4">
                    <label>可调整高度</label>
                    <textarea rows="3" style="resize: vertical;" placeholder="可拖动调整"></textarea>
                </div>
            </div>
        </div>

        <div class="demo-section">
            <h3>响应式宽度</h3>
            <div class="grid-x grid-margin-x">
                <div class="cell small-12 medium-6 large-4">
                    <label>响应式输入框</label>
                    <input type="text" placeholder="小屏100%，中屏50%，大屏33%">
                </div>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/js/foundation.min.js"></script>
    <script>$(document).foundation();</script>
</body>
</html>

输入框尺寸最佳实践 ​

  1. 一致性：保持同一表单内元素尺寸一致
  2. 可触摸：移动端输入框高度不小于 44px
  3. 响应式：根据屏幕尺寸调整输入框宽度
  4. 可读性：确保字体大小适中

总结 ​

本章我们学习了：

  • 使用网格控制输入框宽度
  • 自定义输入框高度
  • 输入框组尺寸
  • 响应式输入框

下一章，我们将学习 Foundation 开关。