带标签的文本框

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

我们可以给文本框加一个标签,你可以控制标签的位置还有样式 .. 使用带标签的文本框,要在文本框的容器上加一个 labeled ..

div.ui.labeled.input

在它里面,标签的内容可以使用一个 div 元素 .. 在上面再加上 ui 还有 label .. 标签的内容是 http:// .. 在这个标签的下面再添加一个普通的文本框 .

div.ui.label{http://}
input[placeholder=mysite.com]

我们可以把这个标签放到右边 .. 需要用一个表示方向的 right .. ui right labeled input .. 然后是文本框 ..

input[placeholder=输入标签]

标签内容放在这个文本框的下面 .. 这个标签的内容我们用一个标签的样式 .. 一个 a 标签,上面加上 ui tag label .. 添加标签 ..

a.ui.tag.label{添加标签}

这样这个标签会在文本框的右边显示,并且内容的样式像是一个标签 ..

我们可以把这个标签的样式变成角标 .. 在文本框的容器上要加上一个 corner .. div.ui.corner.labeled.input .. 一个普通的文本框 .. input[placeholder=搜索...]

下面是标签的内容 .. 放在一个 div 元素里面 .. 在这个容器上也需要加上一个 corner 类 .. div.ui.corner.label .. 表示这是标签内容的样式是一个角标 ..

标签的内容可以用一个小图标 .. i.asterisk.icon .. 在文本框的右边会显示一个角标 ... 不过现在它比这个文本框要大一些 .. 有可能是个 bug .. 在 safari 这个角标会显示的正好 .. 我们也可以把这个文本框变成大号的 .. 用一个 big ..

默认它是在右边显示 .. 你也可以用一个 left ,让它在文本框的左边显示 .. 复制一下 .. 在文本框的容器上先添加一个 left .. 然后在这个标签元素上也需要再用一个 left ..

现在这个角标会在文本框的左边显示 ..

带标签的文本框《 Semantic UI 元素 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点