YES의 선택 상자에서 CSS로 스타일을 채우면 어떨까.
이것은 물론 웹 브라우저에도 영향을 미치지만, 그 영향을 받기는 좀 어려울 것 같다.제가 실제로 한 결과를 소개하겠습니다.
검증용 HTML <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h1>スタイルなし</h1>
<select>
<option>選択肢1</option>
<option>選択肢2</option>
</select>
<h1>width, height</h1>
<select style="width:200px; height:30px;">
<option>選択肢1</option>
<option>選択肢2</option>
</select>
<h1>border</h1>
<select style="border: 1px solid #f00;">
<option>選択肢1</option>
<option>選択肢2</option>
</select>
<h1>border-radius</h1>
<select style="border-radius: 8px;">
<option>選択肢1</option>
<option>選択肢2</option>
</select>
<h1>background-color</h1>
<select style="background-color: #f00;">
<option>選択肢1</option>
<option>選択肢2</option>
</select>
<h1>box-shadow</h1>
<select style="box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.3);">
<option>選択肢1</option>
<option>選択肢2</option>
</select>
<h1>全部入り</h1>
<select style="width: 200px; height: 30px;
border: 1px solid #f00;
border-radius: 8px;
background-color: #f00;
box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.3);">
<option>選択肢1</option>
<option>選択肢2</option>
</select>
</body>
</html>
Safari 8.0 (10600.1.25)
스타일을 지정하면 파란색 선택 버튼이 사라지고 예전의 그리운 스타일로 변한다.수상주의 시대의 흔적인지 미묘한 입체감 때문에 배경색을 지정하면 불편하다.
다른 스타일과 동시에 사용할 때만 하이라이트의 지정이 적용되지만,borderradius와box-shoadow의 지정은 항상 무시됩니다.
디스플레이 배율 변경하기
브라우저 표시 배율을 변경한 후 OS 표준의 파란색 선택 버튼이 갑자기 사라지고 Height의 지정이 유효해졌다.
Google Chrome 39.0.2171.42 beta (64-bit)
크롬만 베타 버전을 사용했기 때문에 정식 버전과는 차이가 있을 수 있다.주의하십시오.
사파리와 결과는 거의 달라지지 않았지만 크롬은 박스-shoadow를 지정할 수 있었다.또한 스타일을 지정할 때 선택 상자는 입체감이 없습니다.반년 전 크롬의 선택박스 스타일이 평화로워진 느낌으로 기억된다.
디스플레이 배율 변경하기
Firefox 33.0.2
Firefox가 Height를 지정할 때 Yosemite 바람의 선택 상자의 단추 부분을 확대할 것 같습니다.하이트 지정 덕분에 효과도 있었지만 흐릿한 느낌의 표시로 바뀌었다.border-radius의 지정 효과도 좋지만 이때 버튼은 회고적인 느낌을 주어 아쉽다.box-shoadow가 유일하게 YES 바람에 효과가 있어요.
디스플레이 배율 변경하기
Firefox의 경우 표시 배율을 변경해도 거의 차이가 없다.
총결산
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h1>スタイルなし</h1>
<select>
<option>選択肢1</option>
<option>選択肢2</option>
</select>
<h1>width, height</h1>
<select style="width:200px; height:30px;">
<option>選択肢1</option>
<option>選択肢2</option>
</select>
<h1>border</h1>
<select style="border: 1px solid #f00;">
<option>選択肢1</option>
<option>選択肢2</option>
</select>
<h1>border-radius</h1>
<select style="border-radius: 8px;">
<option>選択肢1</option>
<option>選択肢2</option>
</select>
<h1>background-color</h1>
<select style="background-color: #f00;">
<option>選択肢1</option>
<option>選択肢2</option>
</select>
<h1>box-shadow</h1>
<select style="box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.3);">
<option>選択肢1</option>
<option>選択肢2</option>
</select>
<h1>全部入り</h1>
<select style="width: 200px; height: 30px;
border: 1px solid #f00;
border-radius: 8px;
background-color: #f00;
box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.3);">
<option>選択肢1</option>
<option>選択肢2</option>
</select>
</body>
</html>
스타일을 지정하면 파란색 선택 버튼이 사라지고 예전의 그리운 스타일로 변한다.수상주의 시대의 흔적인지 미묘한 입체감 때문에 배경색을 지정하면 불편하다.
다른 스타일과 동시에 사용할 때만 하이라이트의 지정이 적용되지만,borderradius와box-shoadow의 지정은 항상 무시됩니다.
디스플레이 배율 변경하기
브라우저 표시 배율을 변경한 후 OS 표준의 파란색 선택 버튼이 갑자기 사라지고 Height의 지정이 유효해졌다.
Google Chrome 39.0.2171.42 beta (64-bit)
크롬만 베타 버전을 사용했기 때문에 정식 버전과는 차이가 있을 수 있다.주의하십시오.
사파리와 결과는 거의 달라지지 않았지만 크롬은 박스-shoadow를 지정할 수 있었다.또한 스타일을 지정할 때 선택 상자는 입체감이 없습니다.반년 전 크롬의 선택박스 스타일이 평화로워진 느낌으로 기억된다.
디스플레이 배율 변경하기
Firefox 33.0.2
Firefox가 Height를 지정할 때 Yosemite 바람의 선택 상자의 단추 부분을 확대할 것 같습니다.하이트 지정 덕분에 효과도 있었지만 흐릿한 느낌의 표시로 바뀌었다.border-radius의 지정 효과도 좋지만 이때 버튼은 회고적인 느낌을 주어 아쉽다.box-shoadow가 유일하게 YES 바람에 효과가 있어요.
디스플레이 배율 변경하기
Firefox의 경우 표시 배율을 변경해도 거의 차이가 없다.
총결산
Firefox가 Height를 지정할 때 Yosemite 바람의 선택 상자의 단추 부분을 확대할 것 같습니다.하이트 지정 덕분에 효과도 있었지만 흐릿한 느낌의 표시로 바뀌었다.border-radius의 지정 효과도 좋지만 이때 버튼은 회고적인 느낌을 주어 아쉽다.box-shoadow가 유일하게 YES 바람에 효과가 있어요.
디스플레이 배율 변경하기
Firefox의 경우 표시 배율을 변경해도 거의 차이가 없다.
총결산
Reference
이 문제에 관하여(YES의 선택 상자에서 CSS로 스타일을 채우면 어떨까.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/ymrl/items/039dd9b588b281e496d2텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
