ドロップリストで複数選択できるチェックボックスを実装したい

Question

質問内容

html5で複数選択が可能なチェックボックスをドロップリストで実装したい
Dropdown Check Listを利用しているが表示した際に常に、optionが表示されてしまい、ドロップリストにならない。

multiple selectのサンプルコードを書いても同じく表示がドロップリストにならない。
https://notepad-blog.com/content/125/

該当のソースコード

<script src="jquery.multiple.select.js"></script> -->
<select multiple="multiple" id="shiritori" style="width:200px;">
	<option value="1">リンゴ</option>
	<option value="2">ゴリラ</option>
	<option value="3">ラズベリーパイ</option>
	<option value="4">インストローラ―</option>
	<option value="5">ラズベリーパイZero</option>
	<option value="6">ログイン</option>
</select>

Answer 1

jqueryuiのdropdownchecklistでいけませんか？

Comments

[yambejp]

<link rel="stylesheet" href="ttps://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<script src="ttps://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="ttps://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="ttps://cdn.quinninuptavern.com.au/wp-content/plugins/revslider/js/dropdownchecklist/ui.dropdownchecklist-1.4-min.js"></script>
<script>
$(function(){
$("#shiritori").dropdownchecklist( {width: 200 } );
});
</script>
<select multiple="multiple" id="shiritori" style="width:200px;">
<option value="1">リンゴ</option>
<option value="2">ゴリラ</option>
<option value="3">ラズベリーパイ</option>
<option value="4">インストローラ―</option>
<option value="5">ラズベリーパイZero</option>
<option value="6">ログイン</option>
</select>

[haji3]

回答いただきありがとうございます。
該当のコードを貼り付けてみたのですが、表示できませんでした。
jQueryの使い方がわからないのですが、回答いただいたコードはどのようにすればよいのでしょうか。

[yambejp]

失礼しました。リンクのhttpsは先頭のhをとって貼ってあります
codepenにあげておきました

https://codepen.io/yambejp/pen/jObgGer

[haji3]

ありがとうございます!実装できました。
質問なのですが、ドロップリストの色や幅を指定する方法に関しては、js側で記述する形になるのでしょうか。
理想としては
```css
margin-top: 5px;
border: 0;
width: 280px;
height: 42px;
font-size: 16px;
color: black;
border-radius: 5px;
```
のように指定をしたいと考えております。

[yambejp]

見せるのは疑似的に書かれたdivなのでcssで修飾可能です。
.ui-dropdownchecklist-dropcontainer div{
margin-top: 5px;
border: 0;
width: 280px;
height: 42px;
font-size: 16px;
color: black;
border-radius: 5px;
}

[haji3]

ありがとうございます。
cssで修飾できました。
チェックリストの中身は初期状態のままで、選択する際に表示する欄にのみ上記のcssを適用する場合には、どの要素にプロパティを適応させれば良いでしょうか。