W3.CSS Input (输入)

2020-12-01 10:02 更新

顶部标签

实例

<form class="w3-container">

<label>名字</label>

<input class="w3-input" type="text">

<label>姓</label>

<input class="w3-input" type="text">

</form>


尝试一下 »
点击“尝试一下”按钮查看在线实例

底部标签

实例

<form class="w3-container">

<input class="w3-input" type="text">

<label>名字</label>

<input class="w3-input" type="text">

<label>姓</label>

</form>


尝试一下 »
点击“尝试一下”按钮查看在线实例

卡片式输入

实例

<div class="w3-card-4">

<div class="w3-container w3-green">

<h2>标头</h2>

</div>

<form class="w3-container">

<label>名字</label>

<input class="w3-input" type="text">

<label>姓</label>

<input class="w3-input" type="text">

</form>

</div>


尝试一下 »
点击“尝试一下”按钮查看在线实例

彩色标签

使用 w3-text-color 类为标签着色:

实例

<form class="w3-container">

<label class="w3-text-blue"><b>名字</b></label>

<input class="w3-input w3-border" type="text">

<label class="w3-text-blue"><b>姓</b></label>

<input class="w3-input w3-border" type="text">

<button class="w3-btn w3-blue">注册</button>

</form>


尝试一下 »
点击“尝试一下”按钮查看在线实例

带边框的输入

使用 w3-border 类以创建带边框的输入:

实例

<input class="w3-input w3-border" type="text">


尝试一下 »
点击“尝试一下”按钮查看在线实例

圆角边框

使用 w3-round 类创建圆角边框:

实例

<input class="w3-input w3-border w3-round" type="text">

<input class="w3-input w3-border w3-round-large" type="text">


尝试一下 »
点击“尝试一下”按钮查看在线实例

无边界输入

w3 输入类默认情况下具有底部边框。如果需要无边界输入,请添加 w3-border-0 类:

实例

<form class="w3-container w3-light-grey">

  <label>名字</label>

  <input class="w3-input w3-border-0" type="text">

  <label>姓名</label>

  <input class="w3-input w3-border-0" type="text">

</form>


尝试一下 »
点击“尝试一下”按钮查看在线实例

彩色输入框

随意使用您喜欢的样式和颜色:

实例

<div class="w3-container w3-teal">

  <h2>输入表格</h2>

</div>

<form class="w3-container">

  <label class="w3-text-teal"><b>名字</b></label>

  <input class="w3-input w3-border w3-light-grey" type="text">

  <label class="w3-text-teal"><b>姓名</b></label>

  <input class="w3-input w3-border w3-light-grey" type="text">

  <button class="w3-btn w3-blue-grey">注册</button>

</form>


尝试一下 »
点击“尝试一下”按钮查看在线实例

悬停输入

w3-hover-color 类增加了背景颜色输入字段上的鼠标悬停:

实例

<input class="w3-input w3-hover-green" type="text">

<input class="w3-input w3-border w3-hover-red" type="text">

<input class="w3-input w3-border w3-hover-blue" type="text">


尝试一下 »
点击“尝试一下”按钮查看在线实例

动画输入

w3-animate-input 类将输入字段的宽度为100%时,它得到焦点:

实例

<input class="w3-input w3-animate-input" type="text" style="width:30%">


尝试一下 »
点击“尝试一下”按钮查看在线实例

选框

实例

<input class="w3-check" type="checkbox" checked="checked">

<label>牛奶</label>

<input class="w3-check" type="checkbox">

<label>糖</label>

<input class="w3-check" type="checkbox" disabled>

<label>柠檬 (禁用)</label>


尝试一下 »
点击“尝试一下”按钮查看在线实例

单选按钮

实例

<input class="w3-radio" type="radio" name="gender" value="male" checked>

<label>男</label>

<input class="w3-radio" type="radio" name="gender" value="female">

<label>女</label>

<input class="w3-radio" type="radio" name="gender" value="" disabled>

<label>未知 (已禁用)</label>


尝试一下 »
点击“尝试一下”按钮查看在线实例

选择菜单

实例

<select class="w3-select" name="option">

  <option value="" disabled selected>选择你的选项</option>

  <option value="1">选项 1</option>

  <option value="2">选项 2</option>

  <option value="3">选项 3</option>

</select>


尝试一下 »
点击“尝试一下”按钮查看在线实例

带边框的选择菜单

实例

<select class="w3-select w3-border" name="option">


尝试一下 »
点击“尝试一下”按钮查看在线实例

网格中的表单元素

在此示例中,我们使用W3.CSS的自适应网格系统使输入显示在同一行上(在较小的屏幕上,它们将以100%的宽度水平堆叠)。稍后您将详细了解。

实例

<div class="w3-row-padding">

  <div class="w3-third">

    <input class="w3-input w3-border" type="text" placeholder="一">

  </div>

  <div class="w3-third">

    <input class="w3-input w3-border" type="text" placeholder="二">

  </div>

  <div class="w3-third">

    <input class="w3-input w3-border" type="text" placeholder="三">

  </div>

</div>


尝试一下 »
点击“尝试一下”按钮查看在线实例

带标签的网格

实例

<div class="w3-row-padding">

  <div class="w3-half">

    <label>名字</label>

    <input class="w3-input w3-border" type="text" placeholder="二">

  </div>

  <div class="w3-half">

    <label>姓</label>

    <input class="w3-input w3-border" type="text" placeholder="三">

  </div>

</div>


尝试一下 »
点击“尝试一下”按钮查看在线实例

图标标签

实例

   <div class="w3-rest">

      <input class="w3-input w3-border" name="first" type="text" placeholder="名字">

    </div>


尝试一下 »
点击“尝试一下”按钮查看在线实例


以上内容是否对您有帮助:

您可能还喜欢:

在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号