Suche Eingang mit einem Symbol Bootstrap 4

Keine Ahnung, wie ich dies tun kann, da BS 4 nicht unterstützt glyphicons. Kann ich es einrichten als hintergrund oder bewerbe ich mich in verschiedenen Positionen zu einem font-awesome-icon?

Dies ist mein code bisher:

HTML:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

<div class="form-group col-md-4">
  <input class="form-control rounded-0 py-2" type="search" value="search" id="example-search-input">
</div>
<!-- /.form-group -->

Ich möchte an dieser font-awesome-icon. Und ich habe versucht, indem es als background-image zu, wie in:

.form-control {
  background-image: url('https://res.cloudinary.com/dt9b7pad3/image/upload/v1502810110/angle-down-dark_dkyopo.png');
  background-position: right center 5px;
}

Aber das macht nichts. Die einzige Möglichkeit die ich denken kann, ist das hinzufügen von font-awesome-icon und legen Sie dann die Positionierung auf absolute, richtig? Aber ich bin mir nicht sicher, ob das der "sauberen" und korrekten Weg, es zu tun? Muss ich einen anderen Ansatz dazu? Jemand helfen! Danke!

InformationsquelleAutor Retros | 2017-08-15

Update 2019

Warum nicht ein input-Gruppe?

<div class="input-group col-md-4">
      <input class="form-control py-2" type="search" value="search" id="example-search-input">
      <span class="input-group-append">
        <button class="btn btn-outline-secondary" type="button">
            <i class="fa fa-search"></i>
        </button>
      </span>
</div>

Und, Sie können es erscheinen innen die Eingabe mithilfe der border-utils...

        <div class="input-group col-md-4">
            <input class="form-control py-2 border-right-0 border" type="search" value="search" id="example-search-input">
            <span class="input-group-append">
              <button class="btn btn-outline-secondary border-left-0 border" type="button">
                    <i class="fa fa-search"></i>
              </button>
            </span>
        </div>

Oder, mit einem input-group-text w/o den grauen hintergrund, so erscheint das Symbol innerhalb des input...

        <div class="input-group">
            <input class="form-control py-2 border-right-0 border" type="search" value="search" id="example-search-input">
            <span class="input-group-append">
                <div class="input-group-text bg-transparent"><i class="fa fa-search"></i></div>
            </span>
        </div>

Abwechselnd, können Sie die Netz - (row>col-) ohne Dachrinne-Abstand:

<div class="row no-gutters">
     <div class="col">
          <input class="form-control border-secondary border-right-0 rounded-0" type="search" value="search" id="example-search-input4">
     </div>
     <div class="col-auto">
          <button class="btn btn-outline-secondary border-left-0 rounded-0 rounded-right" type="button">
             <i class="fa fa-search"></i>
          </button>
     </div>
</div>

Oder voranstellen das Symbol wie dieses...

<div class="input-group">
  <span class="input-group-prepend">
    <div class="input-group-text bg-transparent border-right-0">
      <i class="fa fa-search"></i>
    </div>
  </span>
  <input class="form-control py-2 border-left-0 border" type="search" value="..." id="example-search-input" />
  <span class="input-group-append">
    <button class="btn btn-outline-secondary border-left-0 border" type="button">
     Search
    </button>
  </span>
</div>

Demo aller Bootstrap-4 Symbol-Eingabe-Optionen

Suche Eingang mit einem Symbol Bootstrap 4

Beispiel mit der Validierung Ikonen

Ich habe versucht, die option 3 und bekam diese Warnung: Div können nicht geschachtelt werden im inneren span -
auch die Frage mit Eingabefeld radius, überprüfen Sie diese css in bootstrap 4. .input-group>.Benutzerdefiniert-wählen Sie:not(:last-child), .input-group>.Formular-control:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
Ich würde gerne wissen, wie das Symbol in dem Fall zog ich die Spanne von rechts nach Links( ich gebe die Haupt-div der input-group-prepend-Klasse), aber ich habe eine einfache box anstelle des symbols

InformationsquelleAutor Zim

3

können Sie auch tun, in dieser Weise mit input-group
```
<div class="input-group">
  <input class="form-control"
         placeholder="I can help you to find anything you want!">
  <div class="input-group-addon" ><i class="fa fa-search"></i></div>
</div>
```
codeply
- Nice job Gabelung der Codeply ich gepostet hatte
- Symbol gedrückt wird draußen, muss <div class="input-group"> <input class="form-control py-2 border-right-0 border" type="search" placeholder="Search"? <div class="input-group-append"> <div class="input-group-text" id="btnGroupAddon2"><i class="fa fa-search"></i></div> </div> </div>
InformationsquelleAutor Aniruddha Das

Habe ich eine andere Variante mit dropdown-Menü (vielleicht für die erweiterte Suche, etc)..
Hier ist, wie es aussieht:

Suche Eingang mit einem Symbol Bootstrap 4

<div class="input-group my-4 col-6 mx-auto">
    <input class="form-control py-2 border-right-0 border" type="search" placeholder="Type something..." id="example-search-input">
    <span class="input-group-append">
        <button type="button" class="btn btn-outline-primary dropdown-toggle dropdown-toggle-split border border-left-0 border-right-0 rounded-0" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <span class="sr-only">Toggle Dropdown</span>
        </button>
        <button class="btn btn-outline-primary rounded-right" type="button">
            <i class="fas fa-search"></i>
        </button>
        <div class="dropdown-menu dropdown-menu-right">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
            <div role="separator" class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Separated link</a>
        </div>
    </span>
</div>

Hinweis: Es scheint grün in den screenshot, da meine Website Hauptthema ist grün.

InformationsquelleAutor Rosdi Kasim

in der ASPX-bootstrap v4.0.0, keine beta (dl 21-01-2018)

<div class="input-group">
<asp:TextBox ID="txt_Product" runat="server" CssClass="form-control" placeholder="Product"></asp:TextBox>
<div class="input-group-append">
    <asp:LinkButton ID="LinkButton3" runat="server" CssClass="btn btn-outline-primary">
        <i class="ICON-copyright"></i>
    </asp:LinkButton>
</div>

InformationsquelleAutor Patricio Moraga

0

Hier ist ein Eingabe-Feld mit einem Symbol "suchen" auf der rechten Seite.
```
  <div class="input-group">
      <input class="form-control py-2 border-right-0 border" type="search" placeholder="Search">
      <div class="input-group-append">
          <div class="input-group-text" id="btnGroupAddon2"><i class="fa fa-search"></i></div>
      </div>
  </div>
```
Hier ist ein Eingabe-Feld mit einem Symbol "suchen" auf der linken Seite.
```
  <div class="input-group">
      <div class="input-group-prepend">
          <div class="input-group-text" id="btnGroupAddon2"><i class="fa fa-search"></i></div>
      </div>
      <input class="form-control py-2 border-right-0 border" type="search" placeholder="Search">
  </div>
```
- Sorry für hijacking ein weiterer Beitrag dazu. Ihrer letzten Frage über die Verwendung von casts mit Pivot-Modelle in Laravel ist durchaus möglich (ich war über hinzufügen eine Antwort, aber dann ist die Frage gelöscht wurde). Bitte können Sie re-add die Frage und ich Stell die Antwort. Sind Sie mit Laravel >=5.5 durch die Art und Weise?
- Looing vorwärts, um zu sehen, Sie zu beantworten! Ich un-löschen der ursprünglichen Frage! stackoverflow.com/questions/51869877/...
InformationsquelleAutor zeros-and-ones

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.