107

データリストのさまざまなオプションのリストが表示される方法を変更したいと思います。それにいくつかの CSS プロパティを適用することは可能ですか?

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

私は試した

option {
    background: red;
}

しかし、うまくいかないようです。

4

4 に答える 4

102

select要素と同様に、 datalist要素のスタイル設定の柔軟性はほとんどありません。それがあなたの質問が求めていたものである場合、提案された用語のいずれもスタイルを設定することはできません。

ブラウザは、これらの要素に対して独自のスタイルを定義します。

于 2012-12-03T23:48:07.207 に答える
0

編集:
他のいくつかのライブラリを見た後、react-datalist- input が、反応、スタイル、および機能のデータリストとやり取りする最も簡単な方法を提供することがわかりました。

経由でスタイルにアクセスできます

.datalist-input

以下の簡単なコード スニペット:

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

古い回答:
(注:react-datalistは維持されておらず、その依存関係の一部は廃止されています)

反応を使用する場合、次を使用してオプションとデータリスト自体のスタイルを設定できます

react-datalist

https://www.npmjs.com/package/react-datalist

これらには、CSS または styled-components を使用してアクセスできます

.react-datalist  
.react-datalist-option

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>
            </>
        );
    };
于 2021-05-10T07:32:11.073 に答える
-11

try:

input[list]
{
  background: red;
}
于 2014-05-09T03:42:32.527 に答える