Datalist-Pfeil nicht im ie und firefox

Hallo, ich bin mit einem datalist-tag für ein dropdown wie in der Geige. Ich bin immer dem Pfeil für die dropdown-Liste im chrome nur. und der Pfeil kommt nicht in ie und firefox.
In firefox die Suche ist faul, die Suche ie; es basiert nicht auf den ersten Brief

The fiddle ist:: https://jsfiddle.net/v7fg0zc8/
bitten geben Sie das styling, wenn jeder um dies zu erreichen

HTML:

  <!DOCTYPE html>
  <html>
  <body>
      <input list="browsers" name="browser">
      <datalist id="browsers">
      <option value="Internet Explorer"></option>
          <option value="Firefox"></option>
          <option value="Chrome"></option>
          <option value="Opera"></option>
          <option value="Safari"></option>
      </datalist>
  </body>
  </html>

Dies ist nur ein Faktor, wie die verschiedenen Browser implementiert haben, das feature. Die Chrome-devs haben beschlossen, eine drop-Pfeil; die FF-und IE-Entwickler beschlossen, nicht zu. Andere HTML5-input-Typen funktionieren unterschiedlich zwischen den verschiedenen Browsern zu. Nicht bekommen aufgehängt über Dinge, die müssen genau gleich Aussehen in jedem browser.
haben Sie die Antwort?
Versuchen Sie es mit diesem Tocken input.js

InformationsquelleAutor CharanbabuKarnam | 2015-06-25

14

Überprüfen Sie mit dieser. Ich habe versucht, so viele Möglichkeiten, aber wohl nicht geklappt. Vielleicht ist dies die einzige Lösung

CSS:
```
input::-webkit-calendar-picker-indicator {
  display: none;/* remove default arrow */
}
.myarrow:after {
    content: url(https://i.stack.imgur.com/i9WFO.png);
    margin-left: -20px; 
    padding: .1em;
    pointer-events:none;
}
```
HTML:
```
<span class="myarrow"><input list="browsers" name="browser" id="#show-suggestions"></span>
<datalist id="browsers">
  <option value="Internet Explorer"></option>
  <option value="Firefox"></option>
  <option value="Chrome"></option>
  <option value="Opera"></option>
  <option value="Safari"></option>
</datalist>
```
- Endlich jemand, der tatsächlich versucht, zu beantworten ... zwar nicht perfekt (zB. Klick zwei mal im firefox erforderlich), es ist die beste Antwort bisher... ich denke, du bekommst das Kopfgeld morgen
- wie ? Mr: Charan babu zuletzt gesehen 7. august , und danach, wie kann er akzeptiert diese Antwort ?
- sorry für die Zweifel. ich habe gehört, wenn jemand die Annahme der Antwort, der einzige Weg, um bounty
- Ich habe eine Schaltfläche für jede Antwort vergeben, die bounty. Ich habe nicht auf noch nicht, aber es sollte funktionieren,
- Ok, vielen Dank für Ihre Antwort.
- Vielen Dank für Ihre Unterstützung
InformationsquelleAutor Jishnu V S
1

Interessant. Getestet habe ich diese auf meine Maschine und habe das gleiche Ergebnis 🙁
Der Dropdown-Pfeil erscheint nur in Chrome, obwohl in FF konnte ich noch wählen Sie aus der Liste, aber ohne eine drop-down-Pfeil.

Was ist, wenn Sie nur die SELECT-tag statt?
```
<select>
    <option value="Internet Explorer" >Internet Explorer</option>
    <option value="Firefox" >Firefox</option>
    <option value="Chrome" >Chrome</option>
    <option value="Opera" >Opera</option>
    <option value="Safari" >Safari</option>
</select>
```
Hab ich etwas mehr Graben auf diese und fand diesen Beitrag... HTML-Formular: Select-Option vs Datalist-Option

Es besser erklärt, der Unterschied zwischen datalist und wählen Sie. Das könnte auch der Grund sein, warum mein Vorschlag mit den SELECT-statt nicht geeignet sein könnten. Es könnte aber auch erklären, das fehlen des Pfeils. Ich don ' T sehen überall in den anderen Diskussionen über den Pfeil wird ein garantiertes Verhalten. Das datalist kann weiterhin wie eine auto-vervollständigen, aber ohne die drop-down-Pfeil (obwohl ich gerade überprüft diese wieder im IE11 und es gar nicht scheinen, um die AutoVervollständigen).

Vielleicht kann gerade mal auf, wie gut die verschiedenen Browser diese Funktion implementiert wird.
- Ich bin nicht in der Lage zu geben, wenn ich einen select-tag Recht @Lucien
- ja @charanbabu . Ich habe erkannt, dass ein problem mit meiner vorgeschlagenen Antwort, also habe ich bearbeitet meine Antwort.
InformationsquelleAutor Lucien Stals
0

Den <datalist> element ist nicht eine <select> Ersatz.

Die Allgemeine Idee ist, um Ihnen die Fähigkeit, um eine Liste vordefinierter Werte für andere Steuerelemente [1], aber es gibt keine Spezifikation, wie zu zeichnen, die Liste und ob oder nicht, um zu zeigen, ein Pfeil.

Den Pfeil, sehen Sie in chrome ist etwas, das ist browser-unabhängig, dass nur chrome hat.

Nur als Randbemerkung - für datetime-local - nur in chrome werden Sie sehen, dass placeholer:
```
mm/dd/yy --:--:--
```
HTML:
```
<input type="datetime-local" />
```
Wenn Sie wollen, um zu zeigen, die genaue Pfeil in allen Browsern müssen Sie einige javascript-code, für, die (Sie können die jquery-ui ' s autocomplete, zum Beispiel).
- (Wie ich an anderer Stelle hier auch schon) ich weiß, dass viele Dinge, die nicht angegeben sind-und browser-abhängig. Aber das war nicht die Frage OP Fragen habe, und ich gab ein Kopfgeld für. Die Frage ist hier, wie es zu zwingen, haben einen Pfeil, der in allen gängigen Browsern. (Und ja, ich sehe deine Antwort, es gibt keine Notwendigkeit zu Fragen, in den Kommentaren)
InformationsquelleAutor Dekel
-1

Nun, ich habe einige suchen und ich fand sofort diese auf w3schools.
http://www.w3schools.com/tags/tag_datalist.asp
Diese Seite besagt eindeutig, dass es bedeutete, zu implementieren, die auto-Vervollständigung. Auto-Vervollständigung ist eine Funktion, die oft in der IDE mit dem Zweck, mögliche Werte während der Eingabe. In anderen Worten, Firefox und IE Umsetzung der richtige Weg. Sobald Sie sich entscheiden, geben Sie etwas in das Textfeld, bietet es Ihnen mit möglichen Optionen und während der Eingabe filtert die möglichen Optionen. In diesem Fall Chrome implementiert es eher merkwürdig, indem Sie ein dropdown-Feld. Auto-Vervollständigung ist eigentlich nicht so wie in dem Fall, wo würden Sie ein text-input. Sie können es verwenden, für eine dropdown-box jedoch, wenn Sie eine select-tag in Ihrem datalist-wie hier zu sehen https://www.w3.org/TR/html5/forms.html#the-datalist-element
- Kommentieren als normaler Benutzer: W3Schools hat nichts zu tun mit der W3C, und ist bekannt, dass falsche Informationen in vielen Fällen. Die real W3 sagt nichts über datalist für die Autovervollständigung, oder sollte es doch ein Pfeil (w3.org/TR/html5) (das ist das eigentliche problem, Browsern implementieren können, wie Sie wollen)
- ...und Kommentare wie bounty-Geber: ich weiß, was geschrieben in meinem vorherigen Kommentar. Dennoch, die Frage ist hier, wie es zu zwingen, haben ein Pfeil. Unter Berufung auf falsche Quellen, dass es nicht so gemeint zu haben ist keine Antwort.
- Ich bearbeitete es. Auch W3 klar, dass Sie brauchen, um eine select-tag, wenn Sie möchten, eine dropdown-box, Wie gesagt von W3: In der aufwändigere Fall, das datalist-element können gegeben werden, Inhalte, die angezeigt werden sollen für down-level-clients, die keine Unterstützung datalist. In diesem Fall wird die option Elemente im inneren eines select-Elements innerhalb des datalist-element. Also, was ich sagte, ist immer noch korrekt.
- Also W3 clearly states that you need to use a select tag when you want a dropdown box Wo? es ist nicht in Ihrem Angebot, die ausschließlich von alten Browsern ohne datalist-Unterstützung, und die folgenden code-Beispiel (das ist nur ein Beispiel, nicht erforderlich). Hast du vergessen, dass es bereits eine dropdown-box, wählen Sie ohne, und es ist durchaus erlaubt, von der Norm? Das einzige problem ist der Pfeil.
InformationsquelleAutor PieterVK

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.