매우 낮은 수준의 HTML 문제-선택 옵션에서 텍스트에 패딩 추가
QBM5
사소한 서식이 필요한 옵션이있는 선택 상자를 만들려고하는데 문제가 있습니다.
옵션 텍스트에서 내가 찾고있는 것의 예 :
title (some content)
title-2nd (other content)
그리고 옵션 요소의 텍스트를 모든 위의 텍스트처럼 보이도록 서식을 지정했지만 렌더링 할 때 추가 공간이 잘리는 것처럼 보입니다.
실제 HTML :
<option value="1">1st Option (0, 0, 0) </option>
<option value="5">Default Option (0, 0, 0) </option>
<option value="6">Other (0, 0, 0) </option></select>
다시 말하지만, HTML로 렌더링 할 때 공백이 사라지고 모든 텍스트가 왼쪽으로 정렬되고 단일 간격으로 정렬됩니다.
선택에 대한 자바 스크립트 대체가 있다는 것을 알고 있지만 가능하면 피하고 싶습니다.
사용할 수있는 특수 문자가 있습니까 ( 작동하지 않음)
미리 감사드립니다. (이것이 이해되기를 바랍니다)
편집 : 그래서 선택을 대체하기 위해 자바 스크립트 구성 요소를 사용하는 것에 대해 몇 가지 언급했으며 어떻게 작동하는지 알고 있지만 피하고 싶습니다.
내가 jsFiddle과 codepen에서 보는 것과 로컬에서 보는 것의 차이를 보여주기 위해 스크린 샷 추가
마크 업
다시 말하지만, 어떤 도움이라도 대단히 감사하겠습니다.
에릭 필립스
양식 필드, 특히 <select>및 같은 요소는 스타일 지정하기가 매우 어렵습니다 <option>.
특수 문자를 사용하려는 아이디어는 효과가있을 수 있습니다. 당신은 자신 안에 공간을 사용하여 옵션을 집계 할 수 있습니다 과 같이를 .
편집 : 너무 새로운 댓글 ^ __ ^
HTML 헤더에 문자 세트를 정의 했습니까?
<meta charset="utf-8">헤더에 추가해보세요 . Codepen과 JSFiddle에 포함될 가능성이 높습니다. 나는 당신의 브라우저가 당신의 로컬 사본이 유니 코드 문자를 사용하기를 원하는지 모를 수도 있다고 생각합니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
에서 수정
관련 기사
Related 관련 기사
- 1
재귀 문제에서 가장 낮은 수준의 componentID 표시
- 2
jquery에서 선택할 옵션 추가 문제
- 3
HTML의 테이블에서 선택한 행에 옵션 속성 추가
- 4
추가 된 선택 메뉴에서 선택 옵션 제거
- 5
Javascript로 HTML의 선택 블록에서 옵션 값 삭제
- 6
선택한 div의 html 콘텐츠를 텍스트 영역에 추가하는 방법은 무엇입니까?
- 7
레일에서 낮은 수준의 캐싱 문제
- 8
Formarray : 선택한 텍스트 필드가 비어 있지 않은 경우에만 새 텍스트 필드를 추가하십시오. formarray 텍스트 상자에 문자를 두 개 이상 입력 할 수 없습니다.
- 9
Woocommerce 가변 제품 페이지에서 "옵션 선택"텍스트 변경
- 10
CSS-IE에서 선택 옵션 (배경 이미지 포함) 패딩-왼쪽 또는 텍스트 들여 쓰기 문제
- 11
봄 - 낮은 우선 순위 멀티 스레드 서비스 (제품 성능에 전혀 영향을) 추가
- 12
일반 HTML 텍스트에 패딩 추가
- 13
PHP / HTML 선택 / 옵션에 옵션을 추가하는 방법
- 14
선택 옵션의 값이 html 선택 태그에 지정되지 않은 경우
- 15
jquery의 선택 옵션에서 두 개의 다른 배열 값 추가 (텍스트 및 값)
- 16
선택한 옵션의 데이터를 마지막으로 선택한 텍스트 영역에 추가하는 방법은 무엇입니까?
- 17
텍스트 필드 매개 변수에서 준비된 문장을 통해 DB에 제품 추가
- 18
마우스가 상자에서 나올 때 매트 선택 패널을 닫는 방법은 무엇입니까?
- 19
스택을 사용하여 매우 많은 수에 추가
- 20
문의 양식 7 선택 라디오 버튼에 텍스트 상자 추가
- 21
jquery에서 : selected 속성이 옵션에 추가되지 않은 경우 선택 양식의 값을 취하는 방법
- 22
HTML <select> 초점 문제 : Firefox에서 <옵션>을 선택하려면 2 번의 클릭이 필요합니다.
- 23
다른 드롭 다운 옵션 선택시 1 개의 드롭 다운에서 선택 옵션을 추가 / 제거하는 방법
- 24
Firefox 83이 기본적으로 다중 선택 옵션 목록의 옵션에 눈에 띄는 패딩을 추가하는 이유는 무엇입니까?
- 25
SQL의 HTML 문서에서 텍스트 값을 선택하는 방법은 무엇입니까?
- 26
선택 부 스트랩의 옵션에 이미지 추가
- 27
HTML 선택 옵션에서 텍스트 변경
- 28
아직 존재하지 않는 경우 검색에서 부트 스트랩 선택에 옵션을 추가하는 방법은 무엇입니까?
- 29
jquery Te 텍스트 편집기에서 특수 문자 옵션 추가
몇 마디 만하겠습니다