How to Add an "overflow: scroll;" on the side of an extensive 'datalist'

Question

How to Add an "overflow: scroll;" on the side of an extensive 'datalist'

Navigation

#1 by (0 votes)

1

I have a type="text" search bar next to a datalist, but I'm not succeeding by adding a scroll bar to the side of the displayed content, because the more we add names in the 'option value = the list box displayed, because of this I intend to add an overflow:; this element. Has any possibility of inserting an overflow:; in this datalist?

.bt{ position:relative; 
top:11px; 
font-size:16px; 
height:36px; 
font-weight:bold; 
width:36px; 
outline:none; 
background-image:url(../BT/Lupa.jpg); 
background-repeat:no-repeat; 
background-position:1px; 
background-size:32px 32px; 
border-radius:10px; 
border:1px solid  #06F; 
cursor:pointer; 
}
.bt:hover{ box-shadow:1px 1px 1px #000000;
}
.br{ height:30px; 
position:relative; 
left:5px; 
font-weight:bold;
border: 2px solid #06F; 
border-radius:30px; 
outline:none;
}
input::-webkit-calendar-picker-indicator {
  background-color: transparent;
}

/*Não funciona!*/
datalist { height: 50px; 
position: relative; 
overflow: scroll;
}

<form>

<input list="ctg" type="text" class="br" oninput="myfunction()" placeholder="Pesquisar..." >

<datalist id="ctg" class="dt">

   <option value="HTML-0"><a href="Checkbox buttons checkeds.html"></a></option>
   <option value="HTML-1"><a href="Checkbox buttons checkeds.html"></a></option>
   <option value="HTML-2"><a href="Checkbox buttons checkeds.html"></a></option>
   <option value="HTML-3"><a href="Checkbox buttons checkeds.html"></a></option>
   <option value="HTML-4"><a href="Checkbox buttons checkeds.html"></a></option>
   <option value="HTML-5"><a href="Checkbox buttons checkeds.html"></a></option>
   <option value="HTML-6"><a href="Checkbox buttons checkeds.html"></a></option>

</datalist>

<input type="submit" id="ctg" class="bt" value=""/>

</form>

html css

asked by anonymous 08.06.2018 / 20:41

1 answer

Delete a specific Image from a File Organization of mautic form tables in an HTML site

score 0 · Answer 1

Friend nothing that you try in CSS will work with this element, because each browser defines its own style for this type of element. See the commented parts in the CSS code.

.bt{ position:relative; 
top:11px; 
font-size:16px; 
height:36px; 
font-weight:bold; 
width:36px; 
outline:none; 
background-image:url(../BT/Lupa.jpg); 
background-repeat:no-repeat; 
background-position:1px; 
background-size:32px 32px; 
border-radius:10px; 
border:1px solid  #06F; 
cursor:pointer; 
}
.bt:hover{ box-shadow:1px 1px 1px #000000;
}
.br{ height:30px; 
position:relative; 
left:5px; 
font-weight:bold;
border: 2px solid #06F; 
border-radius:30px; 
outline:none;
}
input::-webkit-calendar-picker-indicator {
  background-color: transparent;
}

/*Não funciona!*/
datalist { 
height: 1000px !important;            /*veja aqui*/
position: relative !important; 
overflow-y: scroll !important;        /*veja aqui*/
background-color: red !important;     /*veja aqui*/
}

<form>

  <input list="ctg" type="text" class="br" oninput="myfunction()" placeholder="Pesquisar..." >

    <datalist id="ctg" class="dt">

   <option value="HTML-0"><a href="Checkbox buttons checkeds.html"></a></option>
   <option value="HTML-1"><a href="Checkbox buttons checkeds.html"></a></option>
   <option value="HTML-2"><a href="Checkbox buttons checkeds.html"></a></option>
   <option value="HTML-3"><a href="Checkbox buttons checkeds.html"></a></option>
   <option value="HTML-4"><a href="Checkbox buttons checkeds.html"></a></option>
   <option value="HTML-5"><a href="Checkbox buttons checkeds.html"></a></option>
   <option value="HTML-6"><a href="Checkbox buttons checkeds.html"></a></option>

  </datalist>

 <input type="submit" id="ctg" class="bt" value=""/>

</form>

OBS: Referring to this answer here on the English site.