項目選択肢のカスタマイズについて

Question

楽天市場で提供しているデフォルトの項目選択肢はとても見ずらいですが、
当該情報を添付ファイルのよう見やすく表示しているショップさんがいます。

【アドレス】
https://item.rakuten.co.jp/low-ya/vg-romeo/

どのように記述すれば同様に表現ができるのでしょうか。###HR######IMG096941af651833fd2db9d44441f5f4f49.jpegIMG0###

Accepted Answer

ECマスターズの伊藤です。

> 当該情報を添付ファイルのよう見やすく表示しているショップさんがいます。

ご連絡頂いておりましたショップさんを、確認させていただいたところ
CSSでデザインの変更を行っていらっしゃいました。

下記CSSを、CSSをまとめて記載している箇所がございましたら、
そちらにとを削除して記入してください。
なければ、PC用商品説明文などに、下記をご登録ください。
＝＝＝＝＝＝＝＝
 
span.choice {
  color: #bf0000;
  display: block;
  font-size: 13px !important;
  padding: 12px;
  margin-bottom: 5px;
  margin-top: 5px;
  border: solid 1px #ddd;
  background: #f5f5f5;
  width: 410px;
  font-weight: normal;
}
#rakutenLimitedId_aroundCart select {
  width: 436px !important;
  margin-bottom: 10px !important;
}
 
＝＝＝＝＝＝＝＝

上記CSSの内容を詳しく記載しましたので、
ご希望のレイアウトに合わせて修正を行ってください。
＝＝＝＝＝＝＝＝
 /* CSSを書き始めるという宣言 */

/* ↓↓ 項目名のレイアウトここから ↓↓ */
span.choice {
  color: #bf0000; /* 文字の色 */
  display: block; 
  font-size: 13px !important; /* 文字のサイズ */
  padding: 12px; /* グレーの枠の内側の余白  */
  margin-bottom: 5px; /* グレーの枠の下の余白 */
  margin-top: 5px; /* グレーの枠の上の余白 */
  border: solid 1px #ddd;  /* グレーの枠の線のタイプ,太さ,色 */
  background: #f5f5f5; /* 背景の色 */
  width: 410px; /* グレーの枠の横幅 */
  font-weight: normal; /* 文字の太さ */
}
/* ↑↑ 項目名のレイアウトここまで ↑↑ */

/* ↓↓ 選択肢のレイアウトここから ↓↓ */
#rakutenLimitedId_aroundCart select {
  width: 436px !important; /* プルダウンの横幅 */
  margin-bottom: 10px !important; /* プルダウン下の余白 */
}
/* ↑↑ 選択肢のレイアウトここまで ↑↑ */

 /* CSSを終了の宣言 */
＝＝＝＝＝＝＝＝

ご不明な点がございましたら、ご質問くださいませ。

Answer

早速のご対応、ありがとうございます。

色などの設定方法も記述していただき、とても助かります。