将引导符号添加到输入框

如何向文本类型输入框添加象形文字?例如，我想在用户名输入中有'icon-user'，就像这样:

当前回答

下面是一种非引导解决方案，通过使用base64 URI编码将象形文字的图像表示直接嵌入到CSS中，使标记变得简单。

input { border:solid 1px #ddd; } input.search { padding-left:20px; background-repeat: no-repeat; background-position-y: 1px; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAASCAYAAABb0P4QAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADbSURBVDhP5ZI9C4MwEIb7//+BEDgICA6C4OQgBJy6dRIEB6EgCNkEJ4e3iT2oHzH9wHbpAwfyJvfkJDnhYH4kHDVKlSAigSAQoCiBKjVGXvaxFXZnxBQYkSlBICII+22K4jM63rbHSthCSdsskVX9Y6KxR5XJSSpVy6GbpbBKp6aw0BzM0ShCe1iKihMXC6EuQtMQwukzPFu3fFd4+C+/cimUNxy6WQkNnmdzL3NYPfDmLVuhZf2wZYz80qDkKX1St3CXAfVMqq4cz3hTaGEpmctxDPmB0M/fCYEbAwZYyVKYcroAAAAASUVORK5CYII=); } <input class="search">

2015-04-17 17:31:12

其他回答

它可以使用官方引导3中的类来完成。X版本，没有任何自定义css。

在输入标记之前使用input-group-addon，在input-group内部然后使用任何字形，下面是代码

<form>
  <div class="form-group">
    <div class="col-xs-5">
      <div class="input-group">
          <span class="input-group-addon transparent"><span class="glyphicon glyphicon-user"></span></span>
          <input class="form-control left-border-none" placeholder="User Name" type="text" name="username">
      </div>
    </div>
  </div>
</form>

这是输出

为了进一步自定义它，在你自己的custom.css文件中添加几行自定义css(如果需要可以调整填充)

.transparent {
    background-color: transparent !important;
    box-shadow: inset 0px 1px 0 rgba(0,0,0,.075);
 }
 .left-border-none {
    border-left:none !important;
    box-shadow: inset 0px 1px 0 rgba(0,0,0,.075);
 }

通过使input-group-addon的背景透明，并使输入标签的左梯度为零，输入将有一个无缝的外观。下面是定制的输出

下面是一个jsbin的例子

这将解决自定义css与标签重叠的问题，在使用input-lg时对齐，并关注标签问题。

2016-12-03 08:32:34

以下是它在纯Bootstrap 5中的工作原理:

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>iconbutton</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" rel="stylesheet"> </head> <body> <div class="d-flex flex-row align-items-center m-4 border rounded"> <i class="fa-solid fa-search mx-2"></i> <input type="text" class="form-control border-0" placeholder="Search"> </div> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js"></script> </body> </html>

若要删除出现在焦点上的边框，请向输入添加shadow-0。

2022-05-27 13:46:11

如果你足够幸运，只需要现代浏览器:尝试css转换翻译。这不需要包装器，并且可以自定义，以便您可以为输入[type=number]留出更多的间距来容纳输入微调器，或者将其移动到句柄的左侧。

    @import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css");


.is-invalid {
  height: 30px;
  box-sizing: border-box;
}

.is-invalid-x {
  font-size:27px;
  vertical-align:middle;
  color: red;
  top: initial;
  transform: translateX(-100%);
}




 <h1>Tasty Field Validation Icons using only css transform</h1>
    <label>I am just a poor boy nobody loves me</label>
    <input class="is-invalid"><span class="glyphicon glyphicon-exclamation-sign is-invalid-x"></span>

http://codepen.io/anon/pen/RPRmNq?editors=110

2015-06-10 01:59:49

用Bootstrap测试4。

获取一个表单控件，并将is-valid添加到它的类中。注意到控件如何变成绿色，但更重要的是，注意到控件右侧的复选符号图标吗?这就是我们想要的!

例子:

.my-icon { padding-right: calc(1.5em + .75rem); background-image: url('https://use.fontawesome.com/releases/v5.8.2/svgs/regular/calendar-alt.svg'); background-repeat: no-repeat; background-position: center right calc(.375em + .1875rem); background-size: calc(.75em + .375rem) calc(.75em + .375rem); } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> <div class="container"> <div class="col-md-5"> <input type="text" id="date" class="form-control my-icon" placeholder="Select..."> </div> </div>

2019-05-08 18:53:59

您可以使用它的Unicode HTML

所以要添加用户图标，只需添加到占位符属性，或任何您想要的位置。

你可以看看这张小抄。

例子:

方法，不要忘记将输入的字体设置为Glyphicon字体下面的代码:font-family: 'Glyphicons Halflings'， Arial，其中 Arial是输入中常规文本的字体。

2017-09-21 21:49:38

将引导符号添加到输入框

推荐文章

最新文章

标签