라디오 버튼과 라벨의 스타일을 어떻게 지정합니까(CSS)?

StackOverflow https://stackoverflow.com/questions/43643

  •  09-06-2019
  •  | 
  •  

문제

아래 코드가 주어지면 라디오 버튼의 스타일을 레이블 옆에 지정하고 선택한 라디오 버튼의 레이블 스타일을 다른 레이블과 다르게 지정하려면 어떻게 해야 합니까?

<link href="http://yui.yahooapis.com/2.5.2/build/reset-fonts-grids/reset-fonts-grids.css" rel="stylesheet">
<link href="http://yui.yahooapis.com/2.5.2/build/base/base-min.css" rel="stylesheet">

<div class="input radio">
  <fieldset>
    <legend>What color is the sky?</legend>
    <input type="hidden" name="color" value="" id="SubmitQuestion" />
    <input type="radio" name="color" id="SubmitQuestion1" value="1"  />
    <label for="SubmitQuestion1">A strange radient green.</label>
    <input type="radio" name="color" id="SubmitQuestion2" value="2"  />
    <label for="SubmitQuestion2">A dark gloomy orange</label>
    <input type="radio" name="color" id="SubmitQuestion3" value="3"  />
    <label for="SubmitQuestion3">A perfect glittering blue</label>
  </fieldset>
</div>

또한 yui CSS 스타일을 기본으로 사용한다고 말씀드리겠습니다.익숙하지 않은 경우 여기에서 찾을 수 있습니다.

여기에 대한 문서는 다음과 같습니다. 야후!UI 라이브러리

@pkaeding:감사해요.나는 방금 엉망으로 보였던 두 가지를 떠 다니는 것을 시도했습니다.스타일링 활성 라디오 버튼은 Google 검색에서 일부 input[type=radio]:active 지명으로 가능한 것처럼 보였지만 제대로 작동하지 않았습니다.그래서 제가 생각하는 질문은 다음과 같습니다.이것이 오늘날의 모든 최신 브라우저에서 가능합니까? 그렇지 않다면 필요한 최소한의 JS는 무엇입니까?

도움이 되었습니까?

해결책

질문의 첫 번째 부분은 HTML과 CSS만으로 해결할 수 있습니다.두 번째 부분에서는 Javascript를 사용해야 합니다.

라디오 버튼 근처에 라벨 가져오기

"옆에"라는 말이 무슨 뜻인지 잘 모르겠습니다.같은 선과 가까운 선에 있습니까, 아니면 별도의 선에 있습니까?모든 라디오 버튼을 같은 줄에 표시하려면 여백을 사용하여 버튼을 밀어내면 됩니다.각각을 자신의 라인에 두고 싶다면 두 가지 옵션이 있습니다. float: 지역):

  • 사용 <br />s 옵션을 분리하고 일부 CSS를 수직으로 정렬합니다.
<style type='text/css'>
    .input input
    {
        width: 20px;
    }
</style>
<div class="input radio">
    <fieldset>
        <legend>What color is the sky?</legend>
        <input type="hidden" name="data[Submit][question]" value="" id="SubmitQuestion" />

        <input type="radio" name="data[Submit][question]" id="SubmitQuestion1" value="1"  />
        <label for="SubmitQuestion1">A strange radient green.</label>
        <br />
        <input type="radio" name="data[Submit][question]" id="SubmitQuestion2" value="2"  />
        <label for="SubmitQuestion2">A dark gloomy orange</label>
        <br />
        <input type="radio" name="data[Submit][question]" id="SubmitQuestion3" value="3"  />
        <label for="SubmitQuestion3">A perfect glittering blue</label>
    </fieldset>
</div>

현재 선택된 라벨 + 라디오 버튼에 스타일 적용

스타일링 <label> 그렇기 때문에 Javascript를 사용해야 합니다.같은 도서관 jQuery이것에 완벽합니다:

<style type='text/css'>
    .input label.focused
    {
        background-color: #EEEEEE;
        font-style: italic;
    }
</style>
<script type='text/javascript' src='jquery.js'></script>
<script type='text/javascript'>
    $(document).ready(function() {
        $('.input :radio').focus(updateSelectedStyle);
        $('.input :radio').blur(updateSelectedStyle);
        $('.input :radio').change(updateSelectedStyle);
    })

    function updateSelectedStyle() {
        $('.input :radio').removeClass('focused').next().removeClass('focused');
        $('.input :radio:checked').addClass('focused').next().addClass('focused');
    }
</script>

그만큼 focus 그리고 blur IE에서 이 작업을 수행하려면 후크가 필요합니다.

다른 팁

CSS3 지원 브라우저의 경우 다음을 사용할 수 있습니다. 인접 형제 선택자 라벨 스타일링을 위한

input:checked + label {
    color: white;
}

MDN 브라우저 호환성 표 기본적으로 데스크톱과 모바일 모두에서 현재 널리 사용되는 모든 브라우저(Chrome, IE, Firefox, Safari)가 호환된다고 말합니다.

그러면 최소한 버튼과 라벨이 나란히 표시됩니다.두 번째 부분은 CSS만으로는 수행할 수 없으며 자바스크립트가 필요하다고 생각합니다.해당 부분에 도움이 될 수 있는 페이지를 찾았지만 지금은 시도해 볼 시간이 없습니다. http://www.webmasterworld.com/forum83/6942.htm

<style type="text/css">
.input input {
  float: left;
}
.input label {
  margin: 5px;
}
</style>
<div class="input radio">
    <fieldset>
        <legend>What color is the sky?</legend>
        <input type="hidden" name="data[Submit][question]" value="" id="SubmitQuestion" />

        <input type="radio" name="data[Submit][question]" id="SubmitQuestion1" value="1"  />
        <label for="SubmitQuestion1">A strange radient green.</label>

        <input type="radio" name="data[Submit][question]" id="SubmitQuestion2" value="2"  />
        <label for="SubmitQuestion2">A dark gloomy orange</label>
        <input type="radio" name="data[Submit][question]" id="SubmitQuestion3" value="3"  />
        <label for="SubmitQuestion3">A perfect glittering blue</label>
    </fieldset>
</div>
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top