要使用 Semantic 给文本框准备的样式，需要把它放到一个容器里 .. 这里我们先用一个 div ，上面加上 ui 还有 input 这两个类 .. 它里面是一个 input 元素 .. 上面加上 placeholder 属性 ... 属性的值是 搜索 ..

div.ui.input
input[placeholder=搜索...]

Semantic 为文本框提供了很简单的样式 .. 一个圆角效果 .. 灰色的边框 .. 选中这个文本框 .. 边框的颜色会加深 ..

让这个文本框的宽度变成流动的， 可以用一个 fluid .. 复制一段 .. 加上一个 fluid .. 这样这个文本框的宽度会随着它的容器的宽度的变化而变化 ..

我们可以让这个文本框变成透明的 .. 这里用一个 transparent .. 这样会去掉文本框周围的边框，还有它的背景颜色 ..

在暗色背景下显示的文本框可以加上一个 inverted .. 先添加一个背景的背景 .. div.ui.inverted.segment .. 里面放一个文本框 .. 在这个文本框的容器上添加一个 inverted .. 这样应该会去掉文本框上的那个灰色的边框 ..

默认 Semantic 的文本框会自动调整自己的尺寸 .. 或者我们也可以使用一些表示大小的类手工的设置文本框的尺寸 .. mini .. small .. large .. big .. huge .. 还有最大号的 massive ..