Сделать флажок похожим на кнопку CSS

0

Я думаю, что то, чего я пытаюсь достичь, может быть сделано более простым способом. Однако у меня мало опыта работы с JS, и нет ни одного способа CSS. Таким образом, я использую предварительно построенный CSS и JS-код и тонкость, изменяя его. Поэтому я объясню свою конечную цель и посмотрю, приемлемо ли то, что у меня сейчас.

  1. Верхнее меню на веб-странице с кнопками и флажками, которые все визуально выглядят одинаково
  2. Я хотел бы, чтобы флажки выглядели как кнопки, например, флажок только для метки.
  3. Я бы хотел, чтобы флажок все еще сохранял свою функциональность в виде флажка с учетом кода JS, который он вызывает
  4. Является ли способ, которым я вызываю код JS через кнопку и флажок правильно или слишком сложно?

JSFiddle

<li><a title="Zoom to U.S" input type="button" name="US" onclick="US();"><span>Zoom to U.S.</span></a></li>  
<li><a title="Test 1 KML"><input type="checkbox" id="kml-red-check" name="kml-red-check" onclick="toggleKml("red");"><span>Test 1 KML</span></a></li>
  • 3
    Соедините флажок с меткой, скройте флажок и стилизуйте метку, чтобы она выглядела как кнопка
  • 0
    Всякий раз, когда я добавляю '/ ** * Start by hiding the checkboxes */ input[type=checkbox] { visibility: hidden; } перестает работать
Показать ещё 5 комментариев
Теги:

3 ответа

3
Лучший ответ

HTML:

<input type="checkbox" class="hidden" name="cb" id="cb"><label for="cb">text</label>

CSS:

.hidden {position:absolute;visibility:hidden;opacity:0;}
input[type=checkbox] + label {
  color: #ccc;
  font-style: italic;
} 
input[type=checkbox]:checked + label {
  color: #f00;
  font-style: normal;
}

http://css-tricks.com/almanac/selectors/c/checked/

Однако не будет работать на IE9.

edit: После вашей разметки это должно быть примерно так:

<ul>
<li><input id="cb1" name="cb1-name" type="checkbox" onkeypress="setTimeout('checkIt(\'cb1\')',100);"><label for="cb1" onclick="setTimeout('checkIt(\'cb1\')',100);">text 1</label></li>
<li><input id="cb2" name="cb2-name" type="checkbox" onkeypress="setTimeout('checkIt(\'cb2\')',100);"><label for="cb2" onclick="setTimeout('checkIt(\'cb2\')',100);">text 2</label></li>
</ul>

И затем проверьте, установлен ли флажок или нет в вашей функции. onchange/onclick в флажке не работает в IE

отредактирован еще раз: изменился атрибут NAME, чтобы вы больше не столкнулись с проблемами. И добавил небольшое обходное решение для безответной, хотя и в конечном итоге желаемой, функциональности обмена в IE8. В конце концов вы должны добавить таймер к своей функции, а не встроенный.

function checkIt(e){
    if(document.getElementById(e).checked){
    alert('checked');
    } else {
    alert('unchecked');
    }
}
Поделиться
  • 0
    Это сработало для меня. Я не беспокоюсь о версии IE9, так как у меня есть общий CSS, который я загружаю для IE9 и ниже, спасибо.
  • 0
    @ user2704746 О, это будет работать в IE9. Просто не любая версия до IE9.
Показать ещё 1 комментарий
7

Невозможно изменить появление флажка так радикально с помощью CSS.

Однако, что вы можете сделать, стиль элемента метки достаточно, чтобы он выглядел как кнопка. Из-за характера элемента метки щелчок по нему переключит состояние флажка, сохраняя вашу функциональность неповрежденной.

Вот как это сделать

наценка

<li>
    <label for="kml-red-check">I am a button!</label>
    <input type="checkbox" id="kml-red-check" name="kml-red-check" onchange="toggleKml("red");">
</li>

Обратите внимание, что я изменил обработчик onclick на onchange так как теперь невозможно установить флажок. Его значение изменяется, но когда вы нажимаете на метку

стайлинг

label[for="kml-red-check"]{
   //Your CSS goes that makes the label look like a button goes here
}
#kml-red-check{
    display:none;
}
Поделиться
  • 0
    CSS, который я использую, загружается, как показано в моем JSFiddle. Я думаю, что код ввода делает кнопку, я не уверен.
  • 0
    В вашей скрипке я не вижу, чтобы вы использовали атрибут for поля label . Параметр for должен содержать id флажка, с которым вы хотите связать ярлык ...
Показать ещё 4 комментария
0 
<label>
  <input type="checkbox" ng-model="vm.abc" ng-change="vm.go()"/>
  <span>this is button add some css to lokking like a button</span>
</label>

это будет работать как кнопка, если вы не хотите показывать флажок, используйте это

<label>
  <input type="checkbox" ng-model="vm.abc" ng-change=vm.go()" hidden=''/>
  <span>this is button add some css to lokking like a button</span>
</label>

проверьте здесь https://jsfiddle.net/h0ntpwqk/2/

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню