带图标的文本框

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

我们可以在文本框上可以放一个小图标 ... 在这个文本框的容器上加上一个 icon .. ui.icon.input .. 表示这是一具带图标的文本框 ..

在它里面,先添加一个普通的文本框 .. 在它下面再加上一个小图标 ..

input[placeholder=搜索...]
i.search.icon

你会看到在这个文本框的里面会显示一个小图标 .. 这个小图标会显示在合适的位置上 .. 默认是在文本框的右边 .. 我们也可以让它在文本框的左边显示 .. 复制一下 .. 在这个文本框的容器上,再加上一个表示方向的 left ... 现在它会在左边显示 ..

给这个小图标加上一个圆形的边框,可以用一个 circular .. 在这个类应该放到这个小图标的元素上 .. 在这个小图标的上面可以再加上一个 link .. 让它可以单独点击 ..

这个圆形图标也可以变成实心的 .. 在小图标元素上,再加上一个 inverted .. 这样图标本身会是白色的,它的背景会是灰色 .. 鼠标放在上面,这个背景颜色会加深 ..

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

统计

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

社会化网络

关于

微信订阅号

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