Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
701 views
in Technique[技术] by (71.8m points)

javascript - Datalist arrow not coming in ie and firefox

Hi I am using a datalist tag for a dropdown as in the fiddle. I am getting the arrow for dropdown in chrome only. and the arrow is not coming in ie and firefox. In firefox the search is lazy search ie; it is not based on the first letter

The fiddle is:: https://jsfiddle.net/v7fg0zc8/ pleas specify the styling if any to achieve this

  <!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>
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

Check with this. I've tried so many ways but not worked well. May be this is the only solution

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;
}
<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>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...