div와 같은 작업을 확인란으로 설정하십시오.

확인란이있는 색상 이름 목록이 있습니다. 확인란을 선택하는 대신 제목이있는 전체 div를 선택할 수 있기를 바랍니다. 확인 된 div는 다른 배경색으로 이해됩니다.div와 같은 작업을 확인란으로 설정하십시오.

내 HTML도 erb 파일이며 루비를 포함하고 있습니다. 나는 < % = color.name %>을 "idea [color_ids] []"id div 안에 넣기를 원합니다. 나는 서로의 내부에 이르렀하려고 할 때하지만 난

이

HTML/ERB 파일

<ul class="multi-column-checkbox"> 
     <% for color in Color.master_colors %> 
      <li><%= check_box_tag "idea[color_ids][]", color.id, 
@idea.colors.include?(color) %> <%= color.name %></li> 
     <% end %> 
     </ul>

는 어떻게 얻을 수있는 내부 color.names "아이디어는 [color_ids] []"단지 대신 div에 레일 오류를 얻을 li div 안에? 그래서 나는 전체 "아이디어 [color_ids] []"(색깔 이름이 안에있는)를 선택할 수 있습니까?

출처

2013-10-07 anmaree

당신은 이런 식으로 뭔가를 시도 할 수 :

<label for="check1"> 
    <input type="checkbox" name="check" id="check1" /> Testing 
</label>

그런 다음 당신은 DIV 같은 레이블을 치료하거나 라벨 내부 사업부 - 래퍼를 추가 할 수 있습니다 중 하나.

출처

2013-10-07 19:59:26

문제는 제가 원래 파일에이 태그를 만드는 루비 모듈을 가지고 있고 color_name을 어떻게 넣어야할지 모르겠다는 것입니다. idea_color_ids_ div 안에는 루비가 있습니다. – anmaree

체크 박스를 맞춤 설정하려는 것 같습니다.

.column-checkbox{ 
    width: .. px; 
    height: .. px; 
    background-color: some_color; 
    borders... 
    **position: relative;** 
}

은 체크 박스에 스타일을 추가 '를 열 확인란을'말

.multi-column-checkbox input[type="checkbox"] { 
    visibility: hidden; 
}

이 '리'에 CSS 스타일 (CSS 클래스)를 추가

체크 박스를 숨기기 레이블

.column-checkbox label { 
    **position: absolute;** 
    /* top, bottom, left, right */ 
    width: ...; 
    height: ...; 
    /* etc */ 
}

스타일은 후 체크 박스에 라벨이

.column-checkbox label:after { 
    /* Styles after select */ 
}

또한 당신은 아마 사용자 정의 CSS의 체크 박스에 대한 그물에 예제를 찾을 수

.column-checkbox label:hover{ 
    /* Hover styles */ 
}

목록 항목에 호버 스타일을 추가 할 수 있습니다

. 또한,이 대답을 한번보세요 : How to style checkbox using CSS?

출처

2013-10-07 20:31:10

div와 같은 작업을 확인란으로 설정하십시오.

답변

관련 문제