Ich möchte ändern, wie die Liste der verschiedenen Optionen meiner Datenliste angezeigt wird. Ist es möglich, einige CSS-Eigenschaften darauf anzuwenden?
<input list="languages" id="language_id">
<datalist id="languages">
<option value="html">HTML</option>
<option value="java">Java</option>
<option value="perl">Perl</option>
<option value="php">PHP</option>
<option value="ruby-on-rails">Ruby on Rails</option>
</datalist>
Ich habe es versucht
option {
background: red;
}
aber es scheint nicht zu funktionieren.
Wie auswählen Elemente, die Datenliste element hat sehr wenig Gestaltungsspielraum. Sie können keinen der vorgeschlagenen Begriffe formatieren, wenn dies Ihre Frage war.
Browser definieren ihre eigenen Stile für diese Elemente.
Sie können eine alternative Datenliste mit Jquery erstellen
$(document).on('dblclick', 'input[list]', function(event){
event.preventDefault();
var str = $(this).val();
$('div[list="+$(this).attr("list')+'] span').each(function(k, obj){
if($(this).html().toLowerCase().indexOf(str.toLowerCase()) < 0){
$(this).hide();
}
})
$('div[list="+$(this).attr("list')+']').toggle(100);
$(this).focus();
})
$(document).on('blur', 'input[list]', function(event){
event.preventDefault();
var list = $(this).attr('list');
setTimeout(function(){
$('div[list="+list+"]').hide(100);
}, 100);
})
$(document).on('click', 'div[list] span', function(event){
event.preventDefault();
var list = $(this).parent().attr('list');
var item = $(this).html();
$('input[list="+list+"]').val(item);
$('div[list="+list+"]').hide(100);
})
$(document).on('keyup', 'input[list]', function(event){
event.preventDefault();
var list = $(this).attr('list');
var divList = $('div[list="+$(this).attr("list')+']');
if(event.which == 27){ // esc
$(divList).hide(200);
$(this).focus();
}
else if(event.which == 13){ // enter
if($('div[list="+list+"] span:visible').length == 1){
var str = $('div[list="+list+"] span:visible').html();
$('input[list="+list+"]').val(str);
$('div[list="+list+"]').hide(100);
}
}
else if(event.which == 9){ // tab
$('div[list]').hide();
}
else {
$('div[list="+list+"]').show(100);
var str = $(this).val();
$('div[list="+$(this).attr("list')+'] span').each(function(){
if($(this).html().toLowerCase().indexOf(str.toLowerCase()) < 0){
$(this).hide(200);
}
else {
$(this).show(200);
}
})
}
})
* {
scrollbar-width: thin;
scrollbar-color: #BBB #EEE;
}
*::-webkit-scrollbar {
width: 10px;
}
*::-webkit-scrollbar-track {
background: #C0C3C6;
}
*::-webkit-scrollbar-thumb {
background-color: #888;
border-radius: 10px;
border: 3px solid #C0C3C6;
}
table {
width: 400px;
margin: 0 auto;
background: #EEE;
font-family: Arial;
padding: 10px 30px;
border-radius: 5px;
box-shadow: 0 5px 5px -5px #000;
--border: 1px solid #ABC;
}
table td {
padding-bottom: 10px;
}
table h4 {
text-align: center;
color: #567;
border: 1px solid #567;
border-radius: 3px;
padding: 15px 0;
}
input {
padding: 10px;
font-size: 1em;
width: calc(100% - 20px);
border: var(--border);
border-radius: 3px;
}
input[list]:focus {
outline: none;
}
input[list] + div[list] {
display: none;
position: absolute;
width: 100%;
max-height: 164px;
overflow-y: auto;
max-width: 330px;
background: #FFF;
border: var(--border);
border-top: none;
border-radius: 0 0 5px 5px;
box-shadow: 0 3px 3px -3px #333;
z-index: 100;
}
input[list] + div[list] span {
display: block;
padding: 7px 5px 7px 20px;
color: #069;
text-decoration: none;
cursor: pointer;
}
input[list] + div[list] span:not(:last-child) {
border-bottom: 1px solid #EEE;
}
input[list] + div[list] span:hover {
background: rgba(100, 120, 140, .2);
}
table .instructions {
font-size: .9em;
color: #900;
}
table .instructions b {
color: #123;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table width="400">
<tr>
<td> <h4>DATALIST STYLING ALTERNATIVE</h4> </td>
</tr>
<tr>
<td>
<div>Programming languages</div>
<input type="text" name="language" list="list-language">
<div list="list-language">
<span>CSharp</span>
<span>Delphi</span>
<span>Flutter</span>
<span>Java</span>
<span>Java Script</span>
<span>PHP</span>
<span>Python</span>
<span>Ruby</span>
<span>SAP</span>
<span>Visual Basic</span>
</div>
</td>
</tr>
<tr>
<td>
<div>Cities</div>
<input type="text" name="cities" list="list-cities">
<div list="list-cities">
<span>Athens</span>
<span>Beijing</span>
<span>Berlin</span>
<span>Cairo</span>
<span>Lisbon</span>
<span>London</span>
<span>Mexico City</span>
<span>Moscow</span>
<span>New York</span>
<span>Rio de Janeiro</span>
<span>Rome</span>
<span>Tokyo</span>
</div>
</td>
</tr>
<tr>
<td>
<div class="instructions">
<b>INSTRUCTIONS:</b><hr>
<p><b>Double click on the input:</b><br>Show/hide the datalist.</p>
<p><b>Press esc on the input:</b><br>Hides datalist if visible.</p>
<p><b>Onkeypress in the input:</b><br>Displays the datalist filtering according to the entered string.</p>
<p><b>On pressing enter:</b><br>Ff there is only 1 element in the datalist, this value will be loaded into the input.</p>
</div>
<td>
</tr>
</table>
BEARBEITEN:
Nachdem ich mir einige andere Bibliotheken angesehen hatte, fand ich es heraus reagieren-Datenliste-Eingabe bietet die einfachste Möglichkeit, mit Datenlisten in Reaktion, Stil und Funktionalität gleichermaßen zu interagieren.
Sie können auf Stile zugreifen über
.datalist-input
Ein einfaches Code-Snippet unten:
const DataListWrapper = styled.div`
display: flex;
justify-content: center;
align-items: center;
margin-top: 6px;
.datalist-input {
width: 50%;
color: black;
}
`;
const SomeComponent = () => {
return (
<DataListWrapper>
<ReactDataList
forcePoly
placeholder="Search Something..."
list="my_list"
options={options}
onOptionSelected={(e) => foo(e)}
/>
</DataListWrapper>
);
};
Alte Antwort:
(Hinweis: react-datalist
wird nicht gepflegt und einige seiner Abhängigkeiten sind veraltet)
Wenn Sie mit React arbeiten, können Sie die Optionen und die Datenliste selbst mit stylen
react-datalist
https://www.npmjs.com/package/react-datalist
Auf diese können Sie mit CSS oder styled-components zugreifen
.react-datalist
.react-datalist-option
Hier ist ein einfaches Code-Snippet mit styled-components:
const DataListWrapper = styled.div`
display: flex;
justify-content: center;
align-items: center;
margin-top: 6px;
.datalist-input {
width: 50%;
color: black;
}
`;
const SomeComponent = () => {
return (
<>
<DataListWrapper>
<DataListInput
placeholder="Search Something..."
items={items}
onSelect={DoSomething}
/>
</DataListWrapper>
</>
);
};
Versuchen:
input[list]
{
background: red;
}
Mögliches Duplikat von Ist es möglich, die Dropdown-Vorschläge bei der Verwendung von HTML5-Datenlisten zu gestalten?
– totymedli
10. November 2015 um 8:02 Uhr