Suche Symbol in Textfeld

Wie such-Symbol im Textfeld

HTML:

 <input class="col-lg-3 col-md-3 col-sm-5 col-xs-5 form-control" type="text" name="searchroleName" id="searchroleName" placeholder="Search By RoleName"/><span class="fa fa-search form-control-feedback"></span>

arbeiten fiddle

InformationsquelleAutor user7397787 | 2017-04-24
  1. 2

    Hoffe, dieser code wird Ihnen helfen.

        <div class="col-lg-3 col-md-3 col-sm-5 col-xs-5">    
      <div class="input-group">
                <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
                <div class="input-group-btn">
                    <button type="button" class="btn btn-default">
                         <span class="glyphicon glyphicon glyphicon-search"></span>
                    </button>
                </div>
      </div>
    </div>
    InformationsquelleAutor seven
  2. 1

    CSS:

    input {
  border: 0;
  background: transparent;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
}
input:focus{
  outline: 0;
}
.input-placeholder{
  background-color: #eee;
  display: inline-block;
  padding: 10px;



}

    HTML:

     <div class="input-placeholder">
    <input class="col-lg-3 col-md-3 col-sm-5 col-xs-5 form-control" type="text" name="searchroleName" id="searchroleName" placeholder="Search By RoleName"/><span class="fa fa-search form-control-feedback"></span>
 </div>

    Hier ist die Geige https://jsfiddle.net/6d463wo1/1/

    InformationsquelleAutor Andrei Todorut
  3. 1

    Als pro Ihr code sieht es aus wie Sie mit Bootstrap im bootstrap es eine andere Methode wie input-group. Benutzen Sie folgenden html-code für diese

    <div class="col-lg-3 col-md-3 col-sm-5 col-xs-5">
    <div class="input-group">
        <input class="form-control" type="text" name="searchroleName" id="searchroleName" placeholder="Search By RoleName"/><div class="input-group-addon"><span class="fa fa-search form-control-feedback"></span></div>
    </div>
</div>
    InformationsquelleAutor Super User
  4. 1

    Es ist ein bootstrap-Weise für diese. Verwenden Sie die .input-group-addon Klasse.

    <div class="input-group">
  <input type="text" class="form-control" placeholder="Search By RoleName" aria-describedby="basic-addon2">
  <span class="input-group-addon fa fa-search" id="basic-addon2"></span>
</div>

    Um die Schaltfläche inline mit dem input-Feld, fügen Sie dieses css:

    .input-group .fa-search{
  display: table-cell;
}

    Versuchen Sie es bitte in der fiddle hier

    • für meinen code Ihrer Anzeige aus der Seite des Textfeld nur
    • wenn Sie dem Beispiel Folgen, das ich es nicht sein sollte. Wenn Sie verschiedene element Verschachtelung aktualisieren Sie bitte die Frage um der Lage sein zu handeln.
    InformationsquelleAutor Kristijan Iliev
  5. 0

    Diese können Sie verwenden, wenn Sie möchten,

    HTML:

     <input class="col-lg-3 col-md-3 col-sm-5 col-xs-5 form-control" type="text" name="searchroleName" id="searchroleName" placeholder="Search By RoleName &#128269;"/>

    InformationsquelleAutor Sagar Kodte
  6. 0
        <!DOCTYPE ht`enter code here`ml>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" 
   href="https://cdnjs.cloudflare.com/ajax/libs/fontawesome/4.7.0/css/font-awesome.min.css">
    <style>

    * {
        box-sizing: border-box;
    }

    .club input[type=text] {
        padding: 10px;
        font-size: 17px;
        border: 1px solid black;
        border-right: 0px solid black;
        float: left;
        width: 90%;
    }

    .club button {
        float: left;
        width: 10%;
        padding: 10px;
        background:white;
        color: black;
        font-size: 17px;
        border: 1px solid grey;
        border-left: none;
        cursor: pointer;
    }

    </style>
    </head>
    <body>

    <div class="club">
      <input type="text" placeholder="Search.." name="search2">
      <button type="submit"><i class="fa fa-search"></i></button>
    <div>

    </body>
    </html>

    code auf der fiddle

    InformationsquelleAutor Aditya Parmar
Schreibe einen Kommentar