12、Semantic-UI之输入框

1|012.1 基础输入框

  在Semantic-UI中可以定义多个样式的输入框，可以将图片与输入框结合，输入提示信息文字，设置输入框的状态。

1|1示例：定义基础输入框

用户名：
<div class="ui input"><input type="text" placeholder="请输入你的用户名！" name="username" id="username" /></div>

1|2示例：定义输入框的状态

用户名：<div class="ui disabled input"><input type="text" placeholder="请输入你的用户名！" name="username" id="username" /></div>

2|012.2 图标与输入框结合现实

2|1示例：定义图标输入框

<div class="ui left icon input loading">
    <input type="text" name="" id="" placeholder="加载中...">
    <i class="search icon"></i>
</div>

2|2示例：定义输入框与标签结合现实

<div class="ui labeled input">
    <div class="ui label">
        http://
    </div>
    <input type="text" placeholder="请输入url..." />
</div>

3|012.3 输入框的颜色反转与输入框的大小

3|1示例：输入框颜色反转 inverted

<div class="ui inverted labeled input">
    <div class="ui label">
        http://
    </div>
    <input type="text" placeholder="请输入url..." />
</div>

3|2示例：定义不同大小的输入框

<div class="ui tiny input">
    <input type="text" placeholder="请输入...">
</div>
<div class="ui small input">
    <input type="text" placeholder="请输入...">
</div>
<div class="ui medium input">
    <input type="text" placeholder="请输入...">
</div>

4|012.4 小结

  输入框的编写必须在input标签下，但是编写这些样式可以根据实际业务需求进行设置。

__EOF__

本文作者：StaryJie
本文链接：https://www.cnblogs.com/jie-fang/p/10279553.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！