Ich möchte zu ändern, wählen Sie das Symbol/dropdown-Symbol (fa-chevron-down). Wie kann ich das?

Möchte ich ein Formular verwenden, wie in dem code von bootstrap, aber ich möchte zu ändern, wählen Sie das Symbol/dropdown-Symbol, um fa-chevron-down.

HTML:

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
    <div class="col-sm-6">
      <h2>Heading</h2>
      <div class="form-group">
        <label for="exampleInputEmail1">Some-text</label>
        <select class="form-control input-lg">...</select>
        <label for="exampleInputEmail1">Some-text</label>
        <select class="form-control input-lg">...</select>
        <label for="exampleInputEmail1">Some-text</label>
        <select class="form-control input-lg">...</select>
      </div>
    </div>
  </div>
</div>

Nicht du meinst checkbox?

InformationsquelleAutor Mo-Alanteh | 2015-06-04

Hier ist eine Lösung unter Verwendung von font-awesome ist fa-chevron-down nativ (ohne Bild). Es erfordert, dass Sie hinzufügen von font-awesome-tag für das markup, aber es ist ziemlich sauber.

CSS:

/* remove the original arrow */
select.input-lg {
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
  /* no standardized syntax available, no ie-friendly solution available */
}

select + i.fa {
  float: right;
  margin-top: -30px;
  margin-right: 5px;
  /* this is so when you click on the chevron, your click actually goes on the dropdown menu */
  pointer-events: none;
  /* everything after this is just to cover up the original arrow */
  /* (for browsers that don't support the syntax used above) */
  background-color: #fff;
  padding-right: 5px;
}

HTML:

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
    <div class="col-sm-6">
      <h2>Heading</h2>
      <div class="form-group">
        <label for="exampleInputEmail1">Some-text</label>
        <select class="form-control input-lg">...</select>
        <i class="fa fa-chevron-down"></i>
        <label for="exampleInputEmail1">Some-text</label>
        <select class="form-control input-lg">...</select>
        <i class="fa fa-chevron-down"></i>
        <label for="exampleInputEmail1">Some-text</label>
        <select class="form-control input-lg">...</select>
        <i class="fa fa-chevron-down"></i>
      </div>
    </div>
  </div>
</div>

ich habe gerade realisiert, dass diese Lösung verhindert, dass Sie durch klicken auf das chevron, um wählen Sie die Liste. ich aktualisiere meine Antwort auf das problem beheben.
Es ist dreckig und es scheint wie ich es mag, BTW ist es natürlich auch möglich, ohne Bootstrap und einige Geigen.
gut, die "schmutzigen" Sachen (mit einem weißen hintergrund zu vertuschen, die native Pfeil) ist nur erforderlich für internet explorer / edge.
Was ist form-control? Warum machen wir diese Antwort völlig abhängig von bootstrap?
da die Frage ausdrücklich darum gebeten, wie dies in bootstrap.

InformationsquelleAutor Woodrow Barlow

1

Müssen Sie fügen Sie eine CSS-Datei (Sie link im head-Bereich der Seite) und geben Sie für diese Klasse ein background-image :
```
.row > .col-sm-6 > form-group > .form-control-input-lg
{
  background: url(images/example.gif) no-repeat scroll 0px 0px;
  padding-left:0px;
}
```
Diese css-wil fügen Sie einen hintergrund mit Ihrem Bild und nach ändern Sie lediglich die Polsterung und die position des Hintergrundes durch die, die Sie wollen, um die glyphicon in Ihrer Kontrolle.
- Dieser beantwortet Sie nicht die Frage beantworten..
InformationsquelleAutor Tripesdeporc

Dies ist ein-basierte Lösung in die Lösung über (Woodrow Barlow), mit leichten Verbesserungen

CSS:

    /* remove the original arrow */
    select{
        -webkit-appearance: none;
        -moz-appearance: none;
        -o-appearance: none;
        appearance: none; 
        background-color: #92ceea!important;
     }

    select::-ms-expand {
        display: none;
    }

    select + i.fa {
        float: right;
        margin-top: -26px;
        margin-right: 10px;
        /* this is so when you click on the chevron, your click actually goes on the dropdown menu */
        pointer-events: none;
        /* everything after this is just to cover up the original arrow */
        /* (for browsers that don't support the syntax used above) */
        background-color: transparent;
        color:black!important;
        padding-right: 5px;
    }

   select option{
       padding-right: 21px;
   }

HTML:

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>




<select class="form-control">
        <option value="">select_option</option>

        <option value="1">Opção1</option>
        <option value="2">Opção2</option>
</select>
<i class="fa fa-chevron-down"></i>

Browser-Kompatibilität
Safari 5.1.7 | IE9 | Firefox | Google Chrome

Hinweis
Im IE9 fa Pfeil ist vor

Wie wäre loszuwerden, die Abhängigkeit von bootstrap?

InformationsquelleAutor Ilídio Martins

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.