HTML／CSS
[HTML/CSS] bootstrap selectbox
teamnova
2023. 7. 12. 12:00
728x90
안녕하세요. 부트스트랩을 이용하여 selectbox를 쉽게 만들어 보겠습니다.
* 결과
* 준비
https://stickode.tistory.com/821
참고해서 부트스트랩을 사용할 수 있게 해주세요
* 코드
<select id="selectbox" name="selectbox" onchange=""
class="form-select pt-1 mt-4" style="height: 33px;width:40%; vertical-align: middle;">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
<option value="F">F</option>
</select>
select 태그의 class = "form-select"값을 주었습니다.
셀렉박스의 윗 공간에 여백을 주기 위해 mt-4 속성값을 주었습니다. mt는 margin top에 해당됩니다.
* 전체 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=s, initial-scale=1.0">
<title></title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-aFq/bzH65dt+w6FI2ooMVUpc+21e0SRygnTpmBvdBgSdnuTN7QbdgL+OapgHtvPp" crossorigin="anonymous">
</head>
<body>
<div class="container">
<select id="selectbox" name="selectbox" onchange=""
class="form-select pt-1 mt-4" style="height: 33px;width:40%; vertical-align: middle;">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
<option value="F">F</option>
</select>
</div>
</body>
* 기타 속성
글자 크기, 비활성화도 설정가능하니 공식사이트를 참고하여 적용하시길 바랍니다.
https://getbootstrap.com/docs/5.3/forms/select/#default
Select
Customize the native <select>s with custom CSS that changes the element’s initial appearance.
getbootstrap.com
여기까지 읽어주셔서 감사합니다.