Back to Layui

Input.Pre.Suf

docs/form/examples/input.pre.suf.md

2.13.63.4 KB
Original Source
<div class="layui-form"> <div class="layui-row layui-col-space16"> <div class="layui-col-md4"> <div class="layui-input-wrap"> <div class="layui-input-prefix"> <i class="layui-icon layui-icon-username"></i> </div> <input type="text" placeholder="带前缀" class="layui-input"> </div> </div> <div class="layui-col-md4"> <div class="layui-input-wrap"> <input type="text" placeholder="带后缀" class="layui-input"> <div class="layui-input-suffix"> <i class="layui-icon layui-icon-more-vertical"></i> </div> </div> </div> <div class="layui-col-md4"> <div class="layui-input-wrap"> <div class="layui-input-prefix"> <i class="layui-icon layui-icon-date"></i> </div> <input type="text" placeholder="带前缀和后缀" class="layui-input"> <div class="layui-input-suffix"> <i class="layui-icon layui-icon-down"></i> </div> </div> </div> <div class="layui-col-md4"> <div class="layui-input-wrap"> <div class="layui-input-prefix layui-input-split"> <i class="layui-icon layui-icon-password"></i> </div> <input type="password" placeholder="带前缀加分隔框" class="layui-input"> </div> </div> <div class="layui-col-md4"> <div class="layui-input-wrap"> <input type="text" placeholder="带后缀加分隔框" class="layui-input"> <div class="layui-input-suffix layui-input-split"> <i class="layui-icon layui-icon-down"></i> </div> </div> </div> <div class="layui-col-md4"> <div class="layui-input-wrap"> <div class="layui-input-prefix layui-input-split"> <i class="layui-icon layui-icon-date"></i> </div> <input type="text" placeholder="带前缀和后缀加分割框" class="layui-input"> <div class="layui-input-suffix layui-input-split"> <i class="layui-icon layui-icon-down"></i> </div> </div> </div> <div class="layui-col-md6"> <div class="layui-input-wrap"> <div class="layui-input-prefix"> <i class="layui-icon layui-icon-location"></i> </div> <input type="text" placeholder="带前缀无分割框和后缀有分割框" class="layui-input"> <div class="layui-input-suffix layui-input-split"> <i class="layui-icon layui-icon-edit"></i> </div> </div> </div> <div class="layui-col-md6"> <div class="layui-input-wrap"> <div class="layui-input-prefix layui-input-split"> <i class="layui-icon layui-icon-location"></i> </div> <input type="text" placeholder="带前缀有分割框和后缀无分割框" class="layui-input"> <div class="layui-input-suffix"> <i class="layui-icon layui-icon-edit"></i> </div> </div> </div> <div class="layui-col-md4"> <div class="layui-input-wrap"> <div class="layui-input-prefix"> <i class="layui-icon layui-icon-form"></i> </div> <select> <option value="">放置 select 元素</option> <option value="北京">北京</option> <option value="上海">上海</option> <option value="广州">广州</option> <option value="深圳">深圳</option> </select> </div> </div> </div> </div> <!-- import layui -->