<select> 境界線とドロップダウンを非表示 arrow_html/css

CSS スタイルを使用して、 の周囲の境界線とドロップダウン矢印を非表示にします。これは主に、見た目を美しくするために、選択したコンテンツのみを表示するために使用されます。 スタイルコントロールを使用し、単独でテストすることで効果を得ることができますが、リスト内の に配置すると、位置が美しくなく、選択したコンテンツがリスト行を押してしまいます。どうすればよいですか? .select-style{ 位置:absolute; .select-style select{ margin:-2px; 張 台 米 個 個 Block 上記をページ上でテストして、希望する効果を実現できます。ただし 张 台 米 個 個 を追加してリストに表示すると、漢字が押されてしまう問題が発生します。 それを解決するのを手伝ってください！ ！ ！

ディスカッションへの返信 (解決策)

気が変わって js を使用して解決することもできます 選択を非表示にし、選択の値を表示するテキストボックスを追加するのは、おおよそのロジックです。テストされた内容は間違って書かれている可能性があります。IDE は使用せず、コードを直接書いただけです。

関数 hiddenSelect(){ var slcList=document.getElementsByTagName('select'); var ipt ; for(var i=0;i ipt = document.createElement("input "); ipt.setAttribute('slcValue',slcList[i].value); // 選択した値を設定します ipt.value = slcList[i].options[slcList[i].selectedIndex].text; slcList [i].parentNode.appendChild(ipt); slcList[i].style.display="none";