Jak używać czcionek fantastycznych w przypadku pól wyboru itp.

Question

Używam ikon dla mojej strony internetowej w postaci ikon Font Awesome. Jestem całkiem nowy w HTML & CSS. Próbowałem użyć tego do checkboxów i miałem trudności z ustaleniem, w jaki sposób mogę go użyć, aby włączyć/wyłączyć checkbox i wyświetlić ikonę approrpiate.

Na przykład; Używam poniższe znaczniki wyboru:

<div style="font-size: 24px;"> 
<i id="prime" type="checkbox" class="icon-check-empty"></i>icon-check 
</div> 

Używam poniżej jQuery zmienić ikonę, gdy pole wyboru jest włączone/wyłączone:

$(".icon-check-empty").click(function(){ 
    $('#prime').removeClass('icon-check-empty'); 
    $('#prime').addClass('icon-check'); 
}); 

Jestem pewien, że to nie będzie być sposobem, w jaki powinien być używany. Czy mógłbyś wskazać mi, jaki powinien być sposób, w jaki powinien być używany.

Na razie; Chcę użyć pól wyboru, a moim celem jest zaznaczenie/odznaczenie pola wyboru i wyświetlenie odpowiedniej ikony. Po zaznaczeniu: icon-check; niezaznaczone: icon-check-empty

Proszę mnie poprowadzić !!

Answer 1

$("yourselector").click(function(){ 
    if($(this).hasClass('icon-check')){ 
     $(this).removeClass('icon-check').addClass('icon-check-empty');} 
    else { 
     $(this).removeClass('icon-check-empty').addClass('icon-check');} 
});​ 

Zmień yourselector część jak chcesz

Answer 2

Jeśli używasz jQuery można użyć coś takiego ..

Extend jQuery:

jQuery.fn.extend({ 
    shinyCheckbox: 
    function() { 
     var setIcon = function($el) { 
     var checkbox = $el.find('input[type=checkbox]'); 
     var iclass = ''; 
     if (checkbox.is(':checked')) { 
      var iclass = 'icon-check'; 
     } else { 
      var iclass = 'icon-check-empty'; 
     } 
     $el.find('i[class^=icon-]').removeClass('icon-check').removeClass('icon-check-empty').addClass(iclass); 
     } 
     this.find('input[type=checkbox]').change(function() { 
     setIcon($(this).parents('label.checkbox')); 
     }); 
     this.each(function(i, el) { 
     setIcon($(el)); 
     }); 
    } 
}); 

$(document).ready(function() { 
    $('label.checkbox').shinyCheckbox(); 
}); 

a następnie użyć tego w Twój html:

<label class="checkbox" for="mycheckbox"> 
    <i class="icon-check-empty"></i> 
    <input type="hidden" name="mycheckbox" value="0" /> 
    <input id="mycheckbox" name="mycheckbox" type="checkbox" value="1" checked="checked" /> 
    Meine Checkbox hat einen sehr langen Text 
</label> 

A niektóre podstawowe css i masz lśniące wyboru:

input[type="checkbox"] { 
    display: none; 
} 
label.checkbox { 
    cursor: pointer; 
    display: inline-block; 
    margin-left: 1px; 
    padding-left: 15px; /* maybe this is not enough for your font size - remember: it's just an example and not best practice */ 
} 
label.checkbox .icon-check:before, label.checkbox .icon-check-empty:before { 
    margin-left: -15px; 
    padding-right: 3px; 
} 

Answer 3

Oto mój simple CSS-only method:

input[type="radio"], 
input[type="checkbox"] { 
    display:none; 
} 

input[type="radio"] + span:before, 
input[type="checkbox"] + span:before { 
    font-family: 'FontAwesome'; 
    padding-right: 3px; 
    font-size: 20px; 
} 

input[type="radio"] + span:before { 
    content: "\f10c"; /* circle-blank */ 
} 

input[type="radio"]:checked + span:before { 
    content: "\f111"; /* circle */ 
} 

input[type="checkbox"] + span:before { 
    content: "\f096"; /* check-empty */ 
} 

input[type="checkbox"]:checked + span:before { 
    content: "\f046"; /* check */ 
} 

Podstawowym założeniem jest to, aby wybrać przęseł: zanim to obok wejście, które chcesz. Zrobiłem przykład z polami wyboru & radia. Jeśli używasz mniej/sass, możesz po prostu dołączyć .icon-glass: przed deklaracjami, aby wszystko było łatwiejsze do zmodyfikowania.

Jako marginesie, można projektować rzeczy, jakkolwiek jak za pomocą tej metody, aby zmienić kolor, tło, cień-kolor, ikony, itp

można uzyskać znak, aby dodać pomocą FontAwesome source.

selectivizr obsługuje: przed &: zaznaczone, więc jeśli wspieranie IE6-8, używać, aby wspierać IE6 +:

<!--[if (gte IE 6)&(lte IE 8)]> 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/selectivizr/1.0.2/selectivizr-min.js"</script> 
<noscript><link rel="stylesheet" href="[fallback css that display:inline-block radios & checkboxes]" /></noscript> 
<![endif]--> 

Answer 4

Oto przykład wszystkie CSS, który jest bardzo czyste.

http://jsfiddle.net/8wLBJ/

.checkbox-container { width: 100%; height: 30px; padding: 0 0 0 10px; margin: 5px 0 0 0; border-radius: 3px; background-color: #e5e5e5; } 
.checkbox-container label { float: left; padding: 0; margin-top: 7px; } 
.checkbox-container label .checkBoxTitle {width: 200px; margin-top: -1px; font-size: 12px;} 

.newCheck[type="checkbox"]:not(:checked), .newCheck[type="checkbox"]:checked { position: absolute; left: -9999px;} 
.newCheck[type="checkbox"]:not(:checked) + label, .newCheck[type="checkbox"]:checked + label { width: 150px; position: absolute; cursor: pointer; } 
.newCheck[type="checkbox"]:not(:checked) + label:before, .newCheck[type="checkbox"]:checked + label:before { content: ''; position: absolute; left: 0; top: -1px; width: 17px; height: 17px; border: 1px solid #aaa; background: #f8f8f8; border-radius: 3px; box-shadow: inset 0 1px 3px rgba(0,0,0,.1);} 
.newCheck[type="checkbox"]:not(:checked) + label:after, .newCheck[type="checkbox"]:checked + label:after { content: '\f00c'; font-family: FontAwesome; padding-right: 5px; position: absolute; top: -8px; left: 0; font-size: 20px; color: #555;} 
.newCheck[type="checkbox"]:not(:checked) + label:after { opacity: 0;} 
.newCheck[type="checkbox"]:checked + label:after { opacity: 1;} 
.newCheck[type="checkbox"]:checked + label span, .newCheck[type="checkbox"]:not(:checked) + label span { position:absolute; left:25px; } 

Answer 5

Wiele fantazyjnych rozwiązań pole wyboru tam mają wadę usuwania oryginalnego wyboru sygnału wejściowego w sposób, który nie otrzymuje sygnału wejściowego ostrość.
To jest nie do przyjęcia z dwóch powodów:

1. Nie można korzystać z klawiatury (The Tab-key i spacebar), aby przejść do wyboru i zmienić jego wartość.
2. Nie można zastosować stylów hover i focused na polu wyboru.

Powyższe rozwiązanie przez @konsumer jest ładne, ale brakuje mu zdolności do wprowadzania ostrości. Jednak natknąłem się na
implementation przez @geoffrey_crofte, gdzie działa fokus wejściowy. Jednak może nie jest tak fantazyjny, jak @konsumers

Więc .. Połączyłem te dwa i zgasiłem plunker example. Jedynym minusem tego rozwiązania jest to, że trzeba używać znaczników HTML specyficzny dla tej pracy:

<input type="checkbox" class="fancy-check" id="myId"/> 
<label for="myId" ><span>The label text</span></label> 

Pole wyboru muszą być przestrzegane przez znacznikiem etykiety. Znacznik label może następnie zawierać znacznik span zawierający tekst etykiety.

Wprowadziłem również wymóg stosowania klasy fancy-check do nowych stylów, które mają być zastosowane. Ma to na celu uniknięcie stylów niszczących inne pola wyboru na stronie, które nie są wymagane, po tagu label.

Przykład oparty jest na użyciu czcionek ikon, w tym przypadku wymagany jest FontAwesome library.

Arkusz stylów jest tutaj:

/*Move he original checkbox out of the way */ 
[type="checkbox"].fancy-check { 
    position: absolute; 
    left: -9999px; 
} 
/*Align the icon and the label text to same height using tabl-cell display*/ 
/*If you change the font-size of the text, you may also want to do som padding or alignhment changes here*/ 
.fancy-check ~ label > span { 
    display: table-cell; 
    vertical-align: middle; 
    padding-left: 5px; 
} 
/*The label will contain the icon and the text, will grab the focus*/ 
[type="checkbox"].fancy-check + label { 
    cursor: pointer; 
    display: table; 
} 
/*The icon container, set it to fixed size and font size, the padding is to align the border*/ 
/*If you change the font-size of this icon, be sure to adjust the min-width as well*/ 
[type="checkbox"].fancy-check + label:before { 
    font-family: 'FontAwesome'; 
    display: inline-block; 
    box-sizing: border-box; 
    border: 1px solid transparent; 
    font-size: 22px; 
    min-width: 28px; 
    padding: 2px 0 0 3px; 
} 
/* toggle font awsome icon*/ 
[type="checkbox"].fancy-check:checked + label:before { 
    content: "\f046"; 
} 
[type="checkbox"].fancy-check:not(:checked) + label:before { 
    content: "\f096";  
} 
/*Do something on focus, in this case show dashed border*/ 
[type="checkbox"].fancy-check:focus + label:before { 
    border: 1px dashed #777; 
} 
/*Do something on hover, in this case change the image color*/ 
[type="checkbox"].fancy-check:hover + label:before { 
    color: #67afe5; 
} 

Answer 6

Spójrz na to: http://codepen.io/jamesbarnett/pen/yILjk

tutaj jest kod, który pracował dla mnie, z linku powyżej.

/*** custom checkboxes ***/ 

input[type=checkbox] { 
    display:none; 
} 

/* to hide the checkbox itself */ 
input[type=checkbox] + label:before { 
    font-family: FontAwesome; 
    display: inline-block; 
} 

input[type=checkbox] + label:before { 
    content: "\f096"; 
} 

/* unchecked icon */ 
input[type=checkbox] + label:before {  
    letter-spacing: 10px; 
} 

/* space between checkbox and label */ 
input[type=checkbox]:checked + label:before { 
    content: "\f046"; 
} 

/* checked icon */ 
input[type=checkbox]:checked + label:before { 
    letter-spacing: 5px; 
}