Html Question posted in
Some basic documentation can be found here.

Html – How do I hide the arrow that comes with datalist?

I literally just started coding like yesterday, and I want to remove this arrow that comes with the options in datalist:
datalist arrow

I’ve tried this:



input[type="search"]::-webkit-search-decoration {

  display: none;

}

and every other "webkit-search".

Tags:

2

Answers


  1. 0

    could you add a pseudo element on top of the arrow and "cover" the arrow with it?

    input[list] {
    position: relative;
    background-color: white;
    padding-right: 20px; /* Adjust as needed to cover the arrow */
}

input[list]::-webkit-calendar-picker-indicator {
    position: absolute;
    right: 0;
    top: 0;
    width: 20px; /* Same as the right padding of the input */
    height: 100%;
    background-color: white; /* Match the input's background color */
    border-left: 1px solid #ccc; /* Optional, to match input border */
    z-index: 1;
    opacity: 0; /* Hides the arrow */
    pointer-events: none; /* Disables clicking on the pseudo-element */
}
     <label for="exampleDataList">Choose an option:</label>
    <input type="text" id="exampleDataList" list="optionsList">
    
    <datalist id="optionsList">
        <option value="Option 1">
        <option value="Option 2">
        <option value="Option 3">
        <option value="Option 4">
        <option value="Option 5">
        <option value="Option 6">
        <option value="Option 7">
        <option value="Option 8">
        <option value="Option 9">
        <option value="Option 10">
    </datalist>
    Login or Signup to reply.
  2. 0

    You can remove the list arrow by using ::-webkit-calendar-picker-indicator selector and set the arrow to display none!important; Please use !important to make sure the code working. If you don’t like to use display with !important, you can try to set the arrow’s color to transparent too by using input[list]::-webkit-calendar-picker-indicator {color:transparent;}.

    Remember, using [list]::-webkit-calendar-picker-indicator to prevent your custom style applied to input[type="date"]

    input[list]::-webkit-calendar-picker-indicator {
  display: none!important;
}
     <label for="customDataList">Choose an option:</label>
    <input type="text" id="customDataList" list="custom-list">
    
    <datalist id="custom-list">
        <option value="Option 1">
        <option value="Option 2">
        <option value="Option 3">
        <option value="Option 4">
        <option value="Option 5">
    </datalist>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search