programing

html "선택" 요소의 옵션을 스타일화하는 방법은 무엇입니까?

skycolor 2023. 8. 10. 18:39

html "선택" 요소의 옵션을 스타일화하는 방법은 무엇입니까?

제 HTML은 다음과 같습니다.

<select id="ddlProducts" name="ddProducts"> 
    <option>Product1 : Electronics </option>
    <option>Product2 : Sports </option>
</select>

제품 이름(예: '제품1', '제품2' 등)과 그 범주(비즈)를 굵게 만들고 싶습니다.Electronics, Sports 등)는 CSS만을 사용하여 기울임꼴로 표시됩니다.HTML과 CSS를 사용하는 것은 불가능하다는 오래된 질문을 찾았지만, 이제 해결책이 있기를 바랍니다.

몇 가지 스타일 속성만 적용할 수 있습니다.<option>요소

이는 이러한 유형의 요소가 "교체된 요소"의 예이기 때문입니다.OS에 의존하며 HTML/브라우저의 일부가 아닙니다.CSS를 통해 스타일링할 수 없습니다.

다음과 같은 교체 플러그인/라이브러리가 있습니다.<select>실제로는 스타일을 지정할 수 있는 일반 HTML 요소로 구성되어 있습니다.

아니요, 이러한 요소의 스타일링은 사용자의 OS에서 처리하기 때문에 가능하지 않습니다. MSDN은 여기에서 질문에 답합니다.

제하고는을 는.background-color그리고.color옵션 요소에 대해 스타일 객체를 통해 적용된 스타일 설정은 무시됩니다.

옵션 요소의 스타일을 어느 정도 조정할 수 있습니다.

*CSS 선택기는 시스템에 의해 그려진 상자 안의 옵션을 스타일화할 수 있습니다.

예:

#ddlProducts *
{
 border-radius: 15px;
 background-color: red;
}

다음과 같이 표시됩니다.

enter image description here

저는 선택과 옵션을 스타일링하는 이 좋은 예를 찾아 사용했습니다.이 선택으로 원하는 모든 것을 선택할 수 있습니다.여기 피들이 있습니다.

// Iterate over each select element
$('select').each(function() {

  // Cache the number of options
  var $this = $(this),
    numberOfOptions = $(this).children('option').length;

  // Hides the select element
  $this.addClass('s-hidden');

  // Wrap the select element in a div
  $this.wrap('<div class="select"></div>');

  // Insert a styled div to sit over the top of the hidden select element
  $this.after('<div class="styledSelect"></div>');

  // Cache the styled div
  var $styledSelect = $this.next('div.styledSelect');

  // Show the first select option in the styled div
  $styledSelect.text($this.children('option').eq(0).text());

  // Insert an unordered list after the styled div and also cache the list
  var $list = $('<ul />', {
    'class': 'options'
  }).insertAfter($styledSelect);

  // Insert a list item into the unordered list for each select option
  for (var i = 0; i < numberOfOptions; i++) {
    $('<li />', {
      text: $this.children('option').eq(i).text(),
      rel: $this.children('option').eq(i).val()
    }).appendTo($list);
  }

  // Cache the list items
  var $listItems = $list.children('li');

  // Show the unordered list when the styled div is clicked (also hides it if the div is clicked again)
  $styledSelect.click(function(e) {
    e.stopPropagation();
    $('div.styledSelect.active').each(function() {
      $(this).removeClass('active').next('ul.options').hide();
    });
    $(this).toggleClass('active').next('ul.options').toggle();
  });

  // Hides the unordered list when a list item is clicked and updates the styled div to show the selected list item
  // Updates the select element to have the value of the equivalent option
  $listItems.click(function(e) {
    e.stopPropagation();
    $styledSelect.text($(this).text()).removeClass('active');
    $this.val($(this).attr('rel'));
    $list.hide();
    /* alert($this.val()); Uncomment this for demonstration! */
  });

  // Hides the unordered list when clicking outside of it
  $(document).click(function() {
    $styledSelect.removeClass('active');
    $list.hide();
  });

});

body {
  padding: 50px;
  background-color: white;
}

.s-hidden {
  visibility: hidden;
  padding-right: 10px;
}

.select {
  cursor: pointer;
  display: inline-block;
  position: relative;
  font: normal 11px/22px Arial, Sans-Serif;
  color: black;
  border: 1px solid #ccc;
}

.styledSelect {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: white;
  padding: 0 10px;
  font-weight: bold;
}

.styledSelect:after {
  content: "";
  width: 0;
  height: 0;
  border: 5px solid transparent;
  border-color: black transparent transparent transparent;
  position: absolute;
  top: 9px;
  right: 6px;
}

.styledSelect:active,
.styledSelect.active {
  background-color: #eee;
}

.options {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  z-index: 999;
  margin: 0 0;
  padding: 0 0;
  list-style: none;
  border: 1px solid #ccc;
  background-color: white;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.options li {
  padding: 0 6px;
  margin: 0 0;
  padding: 0 10px;
}

.options li:hover {
  background-color: #39f;
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<select id="selectbox1">
  <option value="">Select an option&hellip;</option>
  <option value="aye">Aye</option>
  <option value="eh">Eh</option>
  <option value="ooh">Ooh</option>
  <option value="whoop">Whoop</option>
</select>
<select id="selectbox2">
  <option value="">Month&hellip;</option>
  <option value="january">January</option>
  <option value="february">February</option>
  <option value="march">March</option>
  <option value="april">April</option>
  <option value="may">May</option>
  <option value="june">June</option>
  <option value="july">July</option>
  <option value="august">August</option>
  <option value="september">September</option>
  <option value="october">October</option>
  <option value="november">November</option>
  <option value="december">December</option>
</select>

스타일링 방법은 다음과 같습니다.<option>과 <select>부트스트랩 및/또는 jquery를 사용하는 경우.저는 원래 포스터가 이런 질문을 하는 것이 아니라는 것을 이해하지만, 이 질문을 우연히 발견한 다른 사람들을 도울 수 있다고 생각했습니다.

의 스타일을 만드는 목표를 달성할 수 있습니다.<option>별도로, 하지만 약간의 스타일을 적용해야 할 수도 있습니다.<select>뿐만 아니라.제가 가장 좋아하는 것은 아래에 언급된 "Bootstrap Select" 라이브러리입니다.

부트스트랩 선택 라이브러리(jquery)

부트스트랩을 이미 사용하고 있다면 부트스트랩 선택 라이브러리 또는 아래 라이브러리를 사용해 볼 수 있습니다(부트스트랩 테마가 있기 때문입니다).

전체적으로 스타일을 지정할 수 있습니다.select 요또는소option요소를 별도로 지정합니다.

예:

종속성: jQuery v1.9.1+, 부트스트랩, 부트스트랩의 드롭다운.js 구성 요소 및 부트스트랩의 CSS 필요

호환성:확실하지 않지만 부트스트랩은 "모든 주요 브라우저 및 플랫폼의 안정적인 최신 릴리스를 지원한다"고 말합니다.

데모: https://developer.snapappointments.com/bootstrap-select/examples/

.special {
  font-weight: bold !important;
  color: #fff !important;
  background: #bc0000 !important;
  text-transform: uppercase;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/css/bootstrap-select.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/js/bootstrap-select.min.js"></script>

<select class="selectpicker">
  <option>Mustard</option>
  <option class="special">Ketchup</option>
  <option style="background: #5cb85c; color: #fff;">Relish</option>
</select>

선택2(JS lib)

Select2라는 도서관이 있습니다.

종속성: 라이브러리는 JS + CSS + HTML 전용입니다(JQuery가 필요하지 않음).

호환성: IE 8+, Chrome 8+, Firefox 10+, Safari 3+, Opera 10.6+

데모: https://select2.org/getting-started/basic-usage

부트스트랩 테마도 사용할 수 있습니다.

부트스트랩 예제 없음:

$(function() {
  var $select = $('.select2');
  
  $select.select2({
    theme: 'paper'
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/css/select2.min.css" rel="stylesheet"/>

<select class="select2 form-control" placeholder="Country">
  <optgroup label="Alaskan/Hawaiian Time Zone">
    <option value="AK">Alaska</option>
    <option value="HI">Hawaii</option>
  </optgroup>
  <optgroup label="Pacific Time Zone">
    <option value="CA">California</option>
    <option value="NV">Nevada</option>
    <option value="OR">Oregon</option>
    <option value="WA">Washington</option>
  </optgroup>
</select>

부트스트랩 예:

$(function() {
  var $select = $('.select2');
  
  $select.select2({
    theme: 'paper'
  });
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.2/paper/bootstrap.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/css/select2.min.css" rel="stylesheet"/>

<select class="select2 form-control" placeholder="Country">
  <optgroup label="Alaskan/Hawaiian Time Zone">
    <option value="AK">Alaska</option>
    <option value="HI">Hawaii</option>
  </optgroup>
  <optgroup label="Pacific Time Zone">
    <option value="CA">California</option>
    <option value="NV">Nevada</option>
    <option value="OR">Oregon</option>
    <option value="WA">Washington</option>
  </optgroup>
</select>

MD 부트스트랩($ & Bootstrap & JQuery)

여유가 있으시다면 프리미엄 라이브러리 MD Bootstrap을 사용하실 수 있습니다. (이것은 UI Kit 전체라서 가볍지 않습니다.)

재료 설계를 사용하여 선택 및 옵션 요소의 스타일을 지정할 수 있습니다.

무료 버전이 있지만 예쁜 소재 디자인은 사용할 수 없습니다!

종속성:부트스트랩 4, JQuery,

호환성: "모든 주요 브라우저 및 플랫폼의 안정적인 최신 릴리스를 지원합니다."

데모: https://mdbootstrap.com/docs/jquery/forms/select/ #color

CSS에 것 .selectChrome 또는 Firefox에서 직접 사용할 수 있습니다.제공되는 CSS와 : 래에제공된 CSS및드 HTML코:

.boldoption {
    font-weight: bold;
}

<select>
    <option>Some normal-font option</option>
    <option>Another normal-font option</option>
    <option class="boldoption">Some bold option</option>
</select>

일부 속성은 다음에 대해 스타일을 지정할 수 있습니다.<option> 태그:

font-family
color
font-*
background-color

또한 개인용으로 사용자 정의 글꼴을 사용할 수 있습니다.<option>태그, 예를 들어 icomoon 또는 유사한 icomoon의 모든 Google 글꼴, 재료 아이콘 또는 기타 아이콘 글꼴.(글꼴 선택기 등에 유용할 수 있습니다.)

이를 고려하여 글꼴 패밀리 스택을 만들고 다음에 아이콘을 삽입할 수 있습니다.<option>태그(예:

    <select>
        <option style="font-family: 'Icons', 'Roboto', sans-serif;">a    ★★★</option>
        <option style="font-family: 'Icons', 'Roboto', sans-serif;">b    ★★★★</option>
    </select>

★는 에서가니다옵에서 것입니다.Icons는 그고나머는지리는지▁from▁and머▁rest.Roboto.

사용자 지정 글꼴은 모바일 선택에 사용할 수 없습니다.

이미 언급했듯이, 유일한 방법은 다음을 대체하는 플러그인을 사용하는 것입니다.<select>기능

jQuery 플러그인 목록: http://plugins.jquery.com/tag/select/

다을사용여예살펴봅다니제를하음▁▁using를 사용하여 예문을 .Select2플러그인: http://jsfiddle.net/swsLokfj/23/

실제로 :before와 :before를 추가하고 스타일을 지정할 수 있습니다.적어도 그것은 뭔가.

option {
  font-size: 18px;
  background-color: #ffffff;
}

option:before {
  content: ">";
  font-size: 20px;
  display: none;
  padding-right: 10px;
  padding-left: 5px;
  color: #fff;
}

option:hover:before {
  display: inline;
}

<select id="ddlProducts" name="ddProducts">
  <option>Product1 : Electronics </option>
  <option>Product2 : Sports </option>
</select>

부트스트랩을 사용하면 데이터 콘텐츠를 통한 스타일링을 사용할 수 있습니다.

<select class="selectpicker">
  <option data-content="<span class='label label-success'>Relish</span>">Relish</option>
</select>

예: https://silviomoreto.github.io/bootstrap-select/examples/

변경할 속성이 많지 않더라도 CSS로만 다음 스타일을 수행할 수 있습니다.

.options {
  border: 1px solid #e5e5e5;
  padding: 10px;
}

select {
  font-size: 14px;
  border: none;
  width: 100%;
  background: white;
}

<div class="options">
  <select>
    <option value="">Apple</option>
    <option value="">Banana</option>
    <option value="">Orange</option>
    <option value="">Mango</option>
  </select>
</div>

이것이 당신이 찾고 있는 것입니까?jQuery로 했어요.

코드 실행 코드 조각

$(".custom-select").each(function() {
    var classes = $(this).attr("class"),
        id      = $(this).attr("id"),
        name    = $(this).attr("name");
    var template =  '<div class="' + classes + '">';
    template += '<span class="custom-select-trigger">' + $(this).attr("placeholder") + '</span>';
    template += '<div class="custom-options">';
    $(this).find("option").each(function() {
        template += '<span class="custom-option ' + $(this).attr("class") + '" data-value="' + $(this).attr("value") + '">' + $(this).html() + '</span>';
    });
    template += '</div></div>';

    $(this).wrap('<div class="custom-select-wrapper"></div>');
    $(this).hide();
    $(this).after(template);
});
$(".custom-option:first-of-type").hover(function() {
    $(this).parents(".custom-options").addClass("option-hover");
}, function() {
    $(this).parents(".custom-options").removeClass("option-hover");
});
$(".custom-select-trigger").on("click", function() {
    $('html').one('click',function() {
        $(".custom-select").removeClass("opened");
    });
    $(this).parents(".custom-select").toggleClass("opened");
    event.stopPropagation();
});
$(".custom-option").on("click", function() {
    $(this).parents(".custom-select-wrapper").find("select").val($(this).data("value"));
    $(this).parents(".custom-options").find(".custom-option").removeClass("selection");
    $(this).addClass("selection");
    $(this).parents(".custom-select").removeClass("opened");
    $(this).parents(".custom-select").find(".custom-select-trigger").text($(this).text());
});

body {
font-family: 'Roboto', sans-serif;
}

 .custom-select-wrapper {
        position: relative;
        display: inline-block;
        user-select: none;
    }
    .custom-select-wrapper select {
        display: none;
    }
    .custom-select {
        position: relative;
        display: inline-block;
    }
    .custom-select-trigger {
        position: relative;
        display: block;
        width: 170px;
        padding: 0 84px 0 22px;
        font-size: 19px;
        font-weight: 300;
        color: #5f5f5f;
        line-height: 50px;
        background: #EAEAEA;
        border-radius: 4px;
        cursor: pointer;
        margin-left:20px;
        border: 1px solid #5f5f5f;
        transition: all 0.3s;
    }

    .custom-select-trigger:hover {
        background-color: #d9d9d9;
        transition: all 0.3s;
    }

    .custom-select-trigger:after {
        position: absolute;
        display: block;
        content: '';
        width: 10px; height: 10px;
        top: 50%; right: 25px;
        margin-top: -3px;
        border-bottom: 1px solid #5f5f5f;
        border-right: 1px solid #5f5f5f;
        transform: rotate(45deg) translateY(-50%);
        transition: all 0.4s ease-in-out;
        transform-origin: 50% 0;
    }
    .custom-select.opened .custom-select-trigger:after {
        margin-top: 3px;
        transform: rotate(-135deg) translateY(-50%);
    }
    .custom-options {
        position: absolute;
        display: block;
        top: 100%; left: 0; right: 0;
        margin: 15px 0;
        border: 1px solid #b5b5b5;
        border-radius: 4px;
        box-sizing: border-box;
        box-shadow: 0 2px 1px rgba(0,0,0,.07);
        background: #fff;
        transition: all 0.4s ease-in-out;
        margin-left: 20px;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-15px);
    }
    .custom-select.opened .custom-options {
        opacity: 1;
        visibility: visible;
        pointer-events: all;
        transform: translateY(0);
    }
    .custom-options:before {
        position: absolute;
        display: block;
        content: '';
        bottom: 100%; right: 25px;
        width: 7px; height: 7px;
        margin-bottom: -4px;
        border-top: 1px solid #b5b5b5;
        border-left: 1px solid #b5b5b5;
        background: #fff;
        transform: rotate(45deg);
        transition: all 0.4s ease-in-out;
    }
    .option-hover:before {
        background: #f9f9f9;
    }
    .custom-option {
        position: relative;
        display: block;
        padding: 0 22px;
        border-bottom: 1px solid #b5b5b5;
        font-size: 18px;
        font-weight: 600;
        color: #b5b5b5;
        line-height: 47px;
        cursor: pointer;
        transition: all 0.15s ease-in-out;
    }
    .custom-option:first-of-type {
        border-radius: 4px 4px 0 0;
    }
    .custom-option:last-of-type {
        border-bottom: 0;
        border-radius: 0 0 4px 4px;
    }
    .custom-option:hover,
    .custom-option.selection {
        background: #f2f0f0;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="sources" id="sources" class="custom-select sources" placeholder="My Categories">
    <option value="categoryOne">Category 1</option>
    <option value="categoryTwo">Category 2</option>
    <option value="categoryThree">Category 3</option>
    <option value="categoryFour">Category 4</option>

</select>

2017년이며 특정 선택 옵션을 대상으로 할 수 있습니다.제 프로젝트에는 class="variations"가 있는 테이블이 있고 선택 옵션은 td="value" 테이블에 있으며 선택 항목은 ID select#pa_color입니다.옵션 요소에는 클래스 옵션="attached"(다른 클래스 태그 중)도 있습니다.사용자가 도매 고객으로 로그인한 경우 모든 색상 옵션을 볼 수 있습니다.하지만 소매 고객들은 2가지 색상 옵션을 구매할 수 없기 때문에 저는 그것들을 비활성화했습니다.

<option class="attached" disabled>color 1</option>
<option class="attached" disabled>color 2</option>

약간의 논리가 필요했지만, 다음은 비활성화된 선택 옵션을 대상으로 한 방법입니다.

CSS

table.variations td.value select#pa_color option.attached:disabled {
display: none !important;
}

이 경우, 제 색상 옵션은 도매 고객에게만 표시됩니다.

테이블의 클래스 전환을 사용하여 빠른 대안을 여기에 둡니다.동작은 선택 항목과 매우 유사하지만 전환, 필터 및 색상을 사용하여 각 어린이를 개별적으로 스타일링할 수 있습니다.

function toggleSelect(){ 
 if (store.classList[0] === "hidden"){
    store.classList = "viewfull"
  }
  else {
    store.classList = "hidden"
  }
}

#store {
  overflow-y: scroll;
  max-height: 110px;
  max-width: 50%
 }
 
.hidden {
  display: none
 }
 
.viewfull {
  display: block
}

#store :nth-child(4) {
  background-color: lime;
}

span {font-size:2rem;cursor:pointer}

<span onclick="toggleSelect()">⮋</span>
 <div id="store" class="hidden">
 
<ul><li><a href="#keylogger">keylogger</a></li><li><a href="#1526269343113">1526269343113</a></li><li><a href="#slow">slow</a></li><li><a href="#slow2">slow2</a></li><li><a href="#Benchmark">Benchmark</a></li><li><a href="#modal">modal</a></li><li><a href="#buma">buma</a></li><li><a href="#1526099371108">1526099371108</a></li><a href="#1526099371108o">1526099371108o</a></li><li><a href="#pwnClrB">pwnClrB</a></li><li><a href="#stars%20u">stars%20u</a></li><li><a href="#pwnClrC">pwnClrC</a></li><li><a href="#stars ">stars </a></li><li><a href="#wello">wello</a></li><li><a href="#equalizer">equalizer</a></li><li><a href="#pwnClrA">pwnClrA</a></li></ul>
 
 </div>

을 사인스인라 정 타 일 을 추 할 수 있 습 니 다 가 일 스 타 의 자 용 을 사 여<option>꼬리표

예:<option style="font-weight:bold;color:#09C;">Option 1</option>은 이 한 이게하스이이특항적목용다됩니에정타일면렇▁to에 을 입니다.<option>요소 전용입니다.

약간의 스타일을 음 자 바 스 시 모 에 적 수 있 습 니 할 다 용 템 스 든 을 스 타 인 라 인 하 크 여 립 용 트 사 법 을 마 ▁styles ▁to ▁to ▁then ▁use ▁the ▁you<option>부요소 내의 <select>과 같은 그런태그:

var select = $(document).getElementById('#select-element-id')

var option = select.children('#option-element-id')

option.css('font-weight', 'bold')

option.css('font-size', '24px')

사용할 수도 있습니다.<option value="" disabled> <br> </option>옵션 사이에 줄 바꿈을 추가합니다.

확실히 효과가 있을 겁니다.선택 옵션은 html이 아닌 OS에 의해 렌더링됩니다.그래서 CSS 스타일이 효과가 없는 것입니다.일반적으로.option{font-size : value ; background-color:colorCode; border-radius:value; }
이것은 효과가 있겠지만, 우리는 패딩, 마진 등을 커스터마이즈할 수 없습니다.

아래 코드 100%는 이 예제에서 가져온 선택 태그를 사용자 지정합니다.

var x, i, j, selElmnt, a, b, c;
/*look for any elements with the class "custom-select":*/
x = document.getElementsByClassName("custom-select");
for (i = 0; i < x.length; i++) {
  selElmnt = x[i].getElementsByTagName("select")[0];
  /*for each element, create a new DIV that will act as the selected item:*/
  a = document.createElement("DIV");
  a.setAttribute("class", "select-selected");
  a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML;
  x[i].appendChild(a);
  /*for each element, create a new DIV that will contain the option list:*/
  b = document.createElement("DIV");
  b.setAttribute("class", "select-items select-hide");
  for (j = 1; j < selElmnt.length; j++) {
    /*for each option in the original select element,
    create a new DIV that will act as an option item:*/
    c = document.createElement("DIV");
    c.innerHTML = selElmnt.options[j].innerHTML;
    c.addEventListener("click", function(e) {
        /*when an item is clicked, update the original select box,
        and the selected item:*/
        var y, i, k, s, h;
        s = this.parentNode.parentNode.getElementsByTagName("select")[0];
        h = this.parentNode.previousSibling;
        for (i = 0; i < s.length; i++) {
          if (s.options[i].innerHTML == this.innerHTML) {
            s.selectedIndex = i;
            h.innerHTML = this.innerHTML;
            y = this.parentNode.getElementsByClassName("same-as-selected");
            for (k = 0; k < y.length; k++) {
              y[k].removeAttribute("class");
            }
            this.setAttribute("class", "same-as-selected");
            break;
          }
        }
        h.click();
    });
    b.appendChild(c);
  }
  x[i].appendChild(b);
  a.addEventListener("click", function(e) {
      /*when the select box is clicked, close any other select boxes,
      and open/close the current select box:*/
      e.stopPropagation();
      closeAllSelect(this);
      this.nextSibling.classList.toggle("select-hide");
      this.classList.toggle("select-arrow-active");
  });
}
function closeAllSelect(elmnt) {
  /*a function that will close all select boxes in the document,
  except the current select box:*/
  var x, y, i, arrNo = [];
  x = document.getElementsByClassName("select-items");
  y = document.getElementsByClassName("select-selected");
  for (i = 0; i < y.length; i++) {
    if (elmnt == y[i]) {
      arrNo.push(i)
    } else {
      y[i].classList.remove("select-arrow-active");
    }
  }
  for (i = 0; i < x.length; i++) {
    if (arrNo.indexOf(i)) {
      x[i].classList.add("select-hide");
    }
  }
}
/*if the user clicks anywhere outside the select box,
then close all select boxes:*/
document.addEventListener("click", closeAllSelect);

/*the container must be positioned relative:*/
.custom-select {
  position: relative;
  font-family: Arial;
}
.custom-select select {
  display: none; /*hide original SELECT element:*/
}
.select-selected {
  background-color: DodgerBlue;
}
/*style the arrow inside the select element:*/
.select-selected:after {
  position: absolute;
  content: "";
  top: 14px;
  right: 10px;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-color: #fff transparent transparent transparent;
}
/*point the arrow upwards when the select box is open (active):*/
.select-selected.select-arrow-active:after {
  border-color: transparent transparent #fff transparent;
  top: 7px;
}
/*style the items (options), including the selected item:*/
.select-items div,.select-selected {
  color: #ffffff;
  padding: 8px 16px;
  border: 1px solid transparent;
  border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
  cursor: pointer;
}
/*style items (options):*/
.select-items {
  position: absolute;
  background-color: DodgerBlue;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 99;
}
/*hide the items when the select box is closed:*/
.select-hide {
  display: none;
}
.select-items div:hover, .same-as-selected {
  background-color: rgba(0, 0, 0, 0.1);
}

<div class="custom-select" style="width:200px;">
  <select>
    <option value="0">Select car:</option>
    <option value="1">Audi</option>
    <option value="2">BMW</option>
    <option value="3">Citroen</option>
    <option value="4">Ford</option>
    <option value="5">Honda</option>
    <option value="6">Jaguar</option>
    <option value="7">Land Rover</option>
    <option value="8">Mercedes</option>
    <option value="9">Mini</option>
    <option value="10">Nissan</option>
    <option value="11">Toyota</option>
    <option value="12">Volvo</option>
  </select>
</div>

이 요소는 HTML이 아닌 OS에 의해 렌더링됩니다. CSS를 통해 스타일을 지정할 수 없습니다.

	$(function() {
    var clicky;
    var t=0;
    $(document).mousedown(function(e) {
        clicky = $(e.target);
    });
    $(document).mouseup(function(e) {
        clicky = null;
    });

    $("select").focusout(function(e) {
        if (typeof clicky.attr('id') !== typeof undefined && clicky.attr('id') !== false) {
        	$(this).parents().children("span.selected").html(clicky.html());
        	$(this).children('option[value="'+clicky.attr('id')+'"]').prop('selected', true);
		}
        
        $(this).parents().children("span.lists").html('');
        

    });
    $('select > option').text(function(i, text) {
				var attr = $(this).attr('selected');
				if (typeof attr !== typeof undefined && attr !== false) {
        				$(this).parents().parents().children("span.selected").html(text);
				}
	});

		$("select").focusin(function(){
			$(this).children('option').text(function(i, text) {
    			$(this).parents().children("span.lists").append("<span class='item' id='"+$(this).attr('value')+"'>"+text+"</span>");
				});
		});

	});

select {
  width: 0px;
  height: 0px;
  overflow:hidden;
  outline: none;
  border: none;
  appearance:none;
  -moz-appearance: none;

}
label{
	display: inline-block;
	padding: 5px 10px;
	position: relative;
	width: 100px;
	height: 20px;
	background-color:#ccc;

}
label .selected{
	display: inline-block;
	overflow: hidden;
	width: 100%;
	height: 100%;
}
label span.lists{
	width: 100%;
	display: inline-block;
	position: absolute;
	top: 100%;
	left: 0px;
	box-shadow: 0px 0px 2px 0px #ccc;
	background-color:#fff;
	z-index: 9;
}
label span.item{
	display: inline-block;
	width: 100%;
	border-bottom: 1px solid #ccc;
}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
	<form action="?" method="GET">
	<label><span class="selected">select..</span> <span class="lists"></span>
	<select name="test">
		<option value="1">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</option>
		<option value="2" selected>item 2</option>
		<option value="3">item 3</option>
		<option value="4">item 4</option>
	</select>
	</label><br>
	<label><span class="selected">select..</span> <span class="lists"></span>
	<select name="test2">
		<option value="1">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</option>
		<option value="2">item 2</option>
		<option value="3" selected>item 3</option>
		<option value="4">item 4</option>
	</select>
	</label><br>
	<button>Submit</button>
</form>

</body>
</html>

이것을 시도해 보세요. 도움이 될 수도 있습니다.

[ https://codepen.io/venu9l/pen/jeNXzY][1]

클래스를 추가하고 글꼴 무게:700을 옵션으로 지정할 수 있습니다.그러나 이것을 사용하면 모든 텍스트가 굵어집니다.

이것은 스타일 옵션과 태그 선택에 사용되는 HTML CSS 코드입니다.배경과 굵게 선택된 옵션을 선택했습니다. 닫으면 이탤릭체가 나타납니다.

    <style>
        .mydropdown{
         border:none;
         border-bottom:2px dotted black;
         display:inline;max-width:20%;
         font-style: italic;
         font-weight: 600;
         cursor: pointer;  
    }
    .mydropdown:hover , .myoption:active , .myoption:checked{
         border:2px dotted green;
    }
    .myoption{
         font-style: normal;
    }
    .mydropdown .myoption:checked,
    .mydropdown .myoption:hover ,
    .mydropdown .myoption:active {
        font-style: italic;
        font-weight: 600;
     }
    </style>

(() => {
        const optionValues = document.querySelectorAll(".search-form__value");
        const searchOptions = document.querySelector(".search-form__selector");
        const dropdown = document.querySelector(".search-form__dropdown");
        const input = document.getElementById("search-form-loc");
        const selectorText = document.querySelector(".search-form__label--loc");

        searchOptions.addEventListener("click", function () {
          dropdownHandler();
        });

        optionValues.forEach((option) => {
          option.addEventListener("click", function () {
            updateUI(input, selectorText, this);
          });
        });

        window.addEventListener("mouseup", function (event) {
          if (event.target != dropdown) {
            dropdown.classList.remove("search-form__dropdown--show");
          }
        });

        function dropdownHandler() {
          dropdown.classList.toggle("search-form__dropdown--show");
        }

        function updateUI(input, selectorText, referedThis) {
          input.value = referedThis.textContent.trim();
          selectorText.textContent = referedThis.textContent.trim();
          dropdown.classList.remove("search-form__dropdown--show");
        }
      })();

/* CSS Reset Starts */

  *,
  *::before,
  *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  body {
    font-family:  sans-serif;
    color: #777;
    background-color: slateblue !important;
  }
  /* CSS Reset Ends */

  .search-form {
    display: flex;
    align-items: center;
    width: max-content;
    max-width: 700px;
    margin: 100px auto;

    background: #fff;
  }

  .search-form__label {
    margin-right: 40px;
  }

  .search-form__selector {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    font-size: 14px;
    padding: 12px 18px;
    background: #fff;

    position: relative;
    z-index: 1000;
  }

  .search-form__line {
    height: 100%;
    width: 1px;
    background: #777;
    margin-left: auto;
  }

  .search-form__icon {
    font-size: 24px;
  }

  /* Dropdown */
  .search-form__dropdown {
    list-style: none;
    position: absolute;
    left: 0;
    top: 100%;
    box-shadow: 0 7px 30px -10px #96aa6480;
    width: 100%;
    min-width: max-content;
    transition: 0.4s;
    background-color: #fff;
    opacity: 0;
    visibility: hidden;
    z-index: 10;
    pointer-events: none;
    transform: translateY(20px);
    cursor: pointer;
  }

  .search-form__value {
    padding: 7px;
  }

  .search-form__value:hover {
    background: #0667d5;
    color: #fff;
  }

  .pos-rel {
    position: relative;
  }

  .search-form__dropdown--show {
    opacity: 1;
    visibility: visible;
    pointer-events: visible;
    -webkit-transform: translate(0);
    -ms-transform: translate(0);
    transform: translate(0);
  }

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
    />
  </head>
  <body>
    <form class="search-form">
      <input type="hidden" name="search-form-loc" id="search-form-loc" />
      <div class="pos-rel">
        <div class="search-form__selector">
          <p class="search-form__label search-form__label--loc">Select From List</p>
          <div class="search-form__line">&nbsp;</div>
          <i class="fa fa-caret-down search-form__icon"></i>
        </div>
        <ul class="search-form__dropdown">
          <li class="search-form__value" data-loc="search-form-loc">UK</li>
          <li class="search-form__value" data-loc="search-form-loc">Barcelona</li>
          <li class="search-form__value" data-loc="search-form-loc">Brazil</li>
          <li class="search-form__value" data-loc="search-form-loc">Hungary</li>
        </ul>
      </div>
    </form>
  </body>
</html>

enter image description here

이것은 CSS를 사용하여 가능하며 매우 까다롭습니다!!!사실 그건 해킹입니다.셀렉트 옵션은 아래의 3가지 사항을 충족해야 합니다.

onfocus="this.size=2;"
onblur="this.size=0;"
변경 시="this.size=1;this.size"

HTML 코드

<select onfocus="this.size=3;" onblur="this.size=0;" onchange="this.size=1; this.blur()"> 
    <option>Product1 : Electronics </option>
    <option>Product2 : Sports </option>
</select>

바로 그거야!이제 당신은 평소처럼 CSS 스타일을 할 수 있습니다.클래스와 스타일을 사용하려면.여기서 나는 클래스 CSS 코드 없이 보여줍니다.

      .option: nth-child(1){
background-color: red;
font-style: italic;
}
      .option: nth-child(2){
background-color: blue;
}

일반적으로 패딩이 0인 표시되는 옵션 항목에 왼쪽 및 오른쪽 패딩을 추가하려면 다음과 같이 각 옵션 항목의 왼쪽과 오른쪽에 공백 문자( )를 하나 이상 추가할 수 있습니다.

<option value="INTERNAL VALUE"> VISIBLE ITEM </option>

JavaScript를 사용하지 않으려면 다음을 수행합니다.

select {
  margin-top: 2% !important;
  font-size: 19px !important;
  text-align: center !important;
  width: 25% !important;
  padding: 6px 12px !important;
}
option {
  min-height: 1.5rem !important;
  padding: 14px !important;
}

언급URL : https://stackoverflow.com/questions/7208786/how-to-style-the-option-of-an-html-select-element

'programing' 카테고리의 다른 글

Panda는 알파벳 순서에 따라 열을 다시 정렬하는 Excel에 씁니다. (0)	2023.08.10
스크롤 뷰 내의 Android 목록 뷰 (0)	2023.08.10
ASP.NET MVC - 역할 제공자의 대안? (0)	2023.08.10
Windows PowerShell에서 화면 캡처를 수행하려면 어떻게 해야 합니까? (0)	2023.08.10
JSON_ARRAY가 마리아에 대한 빈 목록을 보내지 않음DB (0)	2023.08.10

현재글html "선택" 요소의 옵션을 스타일화하는 방법은 무엇입니까?

각종 프로그래밍 정보를 다루는 블로그입니다.

Android, mariaDB, GIT, sql-server, PowerShell, reactjs, MongoDB, Ajax, MySQL, C, JSON, bash, spring-boot, Python, oracle, ASP.NET, AngularJS, Excel, jQuery, WordPress,

Today :
Yesterday :

skycolor

html "선택" 요소의 옵션을 스타일화하는 방법은 무엇입니까?

html "선택" 요소의 옵션을 스타일화하는 방법은 무엇입니까?

부트스트랩 선택 라이브러리(jquery)

선택2(JS lib)

MD 부트스트랩($ & Bootstrap & JQuery)

'programing' 카테고리의 다른 글

'programing'의 다른글

티스토리툴바

« 2024/11 »
일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

html "선택" 요소의 옵션을 스타일화하는 방법은 무엇입니까?

html "선택" 요소의 옵션을 스타일화하는 방법은 무엇입니까?

부트스트랩 선택 라이브러리(jquery)

선택2(JS lib)

MD 부트스트랩($ & Bootstrap & JQuery)

'programing' 카테고리의 다른 글

'programing'의 다른글

관련글

티스토리툴바