Дадаць абразок Twitter Bootstrap ў поле ўводу

Як мы можам дадаць значок Twitter Bootstrap значок-пошук справа ад уводу тэксту элемента?

Наступная спроба размешчаны ўсе абразкі ўнутры уваходнага элемента, як мы можам абрэзаць яго, каб ён адлюстроўваецца толькі значок значок-пошуку ?

<�Моцны> Current Замах

enter image description here

<�Моцны> CSS

input.search-box {
    width: 180px;
    background: #333;
    background-image: url('/img/glyphicons-halflings-white.png');
    background-position: -48px 0;
    padding-left: 30px;
    margin-top: 45px;
    border: 0;
    float: right;
}
31

8 адказы

Абноўлена Bootstrap 3.x

Вы можаце выкарыстоўваць <�моцны> .Входной-група </а> клас, як гэта:

<div class="input-group">
    <input type="text" class="form-control"/>
    
        
    
</div>
рабочую дэманстрацыю ў jsFiddle для 3.x


Bootstrap 2.x

Вы можаце выкарыстоўваць <�моцны> .Входной-на даданне </моцны> клас як гэта:

<div class="input-append">
    <input class="span2" type="text">
    <button type="submit" class="btn">
        
    </button>
</div>

рабочую дэманстрацыю ў jsFiddle для 2.x


Як будзе выглядаць наступным чынам:

screenshot outside

Калі вы хочаце значок <�моцны> ўнутры <�моцны /> у поле ўводу, напрыклад:

screenshot inside

Then see my answer to Add a Bootstrap Glyphicon to Input Box

85
дададзена
Ваша рашэнне працуе самонастройки 4 таксама?
дададзена аўтар alhelal, крыніца
Калі не даць рашэнне для пачатковай загрузкі 4 і калі так, то змяніць пытанне.
дададзена аўтар alhelal, крыніца

Абноўлена Bootstrap 3.x

Вы можаце выкарыстоўваць <�моцны> .Входной-група </а> клас, як гэта:

<div class="input-group">
    <input type="text" class="form-control"/>
    
        
    
</div>
рабочую дэманстрацыю ў jsFiddle для 3.x


Bootstrap 2.x

Вы можаце выкарыстоўваць <�моцны> .Входной-на даданне </моцны> клас як гэта:

<div class="input-append">
    <input class="span2" type="text">
    <button type="submit" class="btn">
        
    </button>
</div>

рабочую дэманстрацыю ў jsFiddle для 2.x


Як будзе выглядаць наступным чынам:

screenshot outside

Калі вы хочаце значок <�моцны> ўнутры <�моцны /> у поле ўводу, напрыклад:

screenshot inside

Then see my answer to Add a Bootstrap Glyphicon to Input Box

85
дададзена
Ваша рашэнне працуе самонастройки 4 таксама?
дададзена аўтар alhelal, крыніца
Калі не даць рашэнне для пачатковай загрузкі 4 і калі так, то змяніць пытанне.
дададзена аўтар alhelal, крыніца

Паколькі glyphicons малюнак спрайт, вы сапраўды не можаце зрабіць гэта: важна тое, што вы хочаце, каб абмежаваць памер фону, але няма ніякага спосабу вызначыць, наколькі вялікі фон. Альбо вы выразаць значок вы хочаце, памер яго і выкарыстоўваць яго, або выкарыстоўваць нешта накшталт поля ўводу препенда/дадаць параметр ( http://twitter.github.io/bootstrap/base-css.html#forms , а затым шукаць папярэднічаецца уваходаў).

1
дададзена

Bootstrap 4.x з 3 іншым спосабам.

  1. Icon with default bootstrap Style Icon with default bootstrap Style

    <div class="input-group">
          <input type="text" class="form-control" placeholder="From" aria-label="from" aria-describedby="from">
          <div class="input-group-append">
            
          </div>
        </div>
    
  2. Icon Inside Input with default bootstrap class Icon Inside Input with default bootstrap class

    <div class="input-group">
          <input type="text" class="form-control border-right-0" placeholder="From" aria-label="from" aria-describedby="from">
          <div class="input-group-append">
            
          </div>
    
    </div>
    
  3. Icon Inside Input with small custom css Icon Inside Input with small custom css

    <div class="input-group">
          <input type="text" class="form-control rounded-right" placeholder="From" aria-label="from" aria-describedby="from">
            
        </div> 
    

    Custom Css

    .icon-inside {
          position: absolute;
          right: 10px;
          top: calc(50% - 12px);
          pointer-events: none;
          font-size: 16px;
          font-size: 1.125rem;
          color: #c4c3c3;
          z-index:3;
        }
    

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

.icon-inside {
      position: absolute;
      right: 10px;
      top: calc(50% - 12px);
      pointer-events: none;
      font-size: 16px;
      font-size: 1.125rem;
      color: #c4c3c3;
      z-index:3;
    }
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">

    <div class="container">
    
Icon with default bootstrap Style
    <div class="input-group">
      <input type="text" class="form-control" placeholder="From" aria-label="from" aria-describedby="from">
      <div class="input-group-append">
        
      </div>
    </div>

    
Icon Inside Input with default bootstrap class
    <div class="input-group">
      <input type="text" class="form-control border-right-0" placeholder="From" aria-label="from" aria-describedby="from">
      <div class="input-group-append">
        
      </div>
    </div>

    
Icon Inside Input with small custom css
    <div class="input-group">
      <input type="text" class="form-control rounded-right" placeholder="From" aria-label="from" aria-describedby="from">
        
    </div>

    </div>
</div> </div>

0
дададзена

Bootstrap 4.x з 3 іншым спосабам.

  1. Icon with default bootstrap Style Icon with default bootstrap Style

    <div class="input-group">
          <input type="text" class="form-control" placeholder="From" aria-label="from" aria-describedby="from">
          <div class="input-group-append">
            
          </div>
        </div>
    
  2. Icon Inside Input with default bootstrap class Icon Inside Input with default bootstrap class

    <div class="input-group">
          <input type="text" class="form-control border-right-0" placeholder="From" aria-label="from" aria-describedby="from">
          <div class="input-group-append">
            
          </div>
    
    </div>
    
  3. Icon Inside Input with small custom css Icon Inside Input with small custom css

    <div class="input-group">
          <input type="text" class="form-control rounded-right" placeholder="From" aria-label="from" aria-describedby="from">
            
        </div> 
    

    Custom Css

    .icon-inside {
          position: absolute;
          right: 10px;
          top: calc(50% - 12px);
          pointer-events: none;
          font-size: 16px;
          font-size: 1.125rem;
          color: #c4c3c3;
          z-index:3;
        }
    

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

.icon-inside {
      position: absolute;
      right: 10px;
      top: calc(50% - 12px);
      pointer-events: none;
      font-size: 16px;
      font-size: 1.125rem;
      color: #c4c3c3;
      z-index:3;
    }
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">

    <div class="container">
    
Icon with default bootstrap Style
    <div class="input-group">
      <input type="text" class="form-control" placeholder="From" aria-label="from" aria-describedby="from">
      <div class="input-group-append">
        
      </div>
    </div>

    
Icon Inside Input with default bootstrap class
    <div class="input-group">
      <input type="text" class="form-control border-right-0" placeholder="From" aria-label="from" aria-describedby="from">
      <div class="input-group-append">
        
      </div>
    </div>

    
Icon Inside Input with small custom css
    <div class="input-group">
      <input type="text" class="form-control rounded-right" placeholder="From" aria-label="from" aria-describedby="from">
        
    </div>

    </div>
</div> </div>

0
дададзена

<�Моцны> Bootstrap 4.x

З Bootstrap 4 (і шрыфт Высокі), мы ўсё яшчэ можам выкарыстоўваць <�моцны> ўвод-група абгортка вакол нашай <�моцны> форма кантролю </моцны > элемент, і зараз мы можам выкарыстоўваць <�моцны> ўводу-гурты-Append </моцны> (ці <�моцны> ўводу-групы перад імем </моцны>) абгортка з ўводу-групавым тэкст , каб атрымаць працу:

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Search" aria-label="Search" aria-describedby="my-search">
  <div class="input-group-append">
    
  </div>
</div>

Гэта будзе выглядаць прыкладна так (дзякуючы KyleMit на скрыншоце):

enter image description here

Даведайцеся больш, наведаўшы дакументацыі.

0
дададзена

<�Моцны> Bootstrap 4.x

З Bootstrap 4 (і шрыфт Высокі), мы ўсё яшчэ можам выкарыстоўваць <�моцны> ўвод-група абгортка вакол нашай <�моцны> форма кантролю </моцны > элемент, і зараз мы можам выкарыстоўваць <�моцны> ўводу-гурты-Append </моцны> (ці <�моцны> ўводу-групы перад імем </моцны>) абгортка з ўводу-групавым тэкст , каб атрымаць працу:

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Search" aria-label="Search" aria-describedby="my-search">
  <div class="input-group-append">
    
  </div>
</div>

Гэта будзе выглядаць прыкладна так (дзякуючы KyleMit на скрыншоце):

enter image description here

Даведайцеся больш, наведаўшы дакументацыі.

0
дададзена

Для пачатковай загрузкі 4

        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">

            <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
            <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
        <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
        <form class="form-inline my-2 my-lg-0">
                        <div class="input-group">
                            <input class="form-control" type="search" placeholder="Search">
                            <div class="input-group-append">
                                <div class="input-group-text"></div>
                            </div>
                        </div>
                    </form>

Demo

0
дададзена