Arhn - архитектура программирования

Превращение флажка в значок IE9+

Я пытаюсь превратить флажок в значок, который при нажатии становится красным, а затем снова становится серым при повторном нажатии. Это прекрасно работает во всех современных браузерах (кроме IE).

Я некоторое время играл с этим, и вот как далеко я продвинулся (посмотрите в IE):

http://jsfiddle.net/d67uyfn7/1/

<input class="edit-hours" name="staff.Locked" type="checkbox" ng-model="staff.Locked" id="editHours" ng-show="!isSharedLink && selectedProject.Project.IsDraft" />

Для справки, вот как это должно выглядеть/функционировать (посмотрите в Chrome):

http://jsfiddle.net/twnc27rj/

<input class="edit-hours" name="staff.Locked" type="checkbox" ng-model="staff.Locked" id="editHours" ng-show="!isSharedLink && selectedProject.Project.IsDraft" />

Какие-либо предложения? Спасибо!

input html jquery css internet-explorer
27.10.2014

  • Сделайте флажок скрытым и поместите изображение там, где вы хотите, чтобы флажок был. Затем используйте Javascript, чтобы щелкнуть изображение, чтобы переключить скрытый флажок. Это может помочь. 27.10.2014

Ответы:


1

Попробуйте использовать комбинации checkbox input и label: http://jsfiddle.net/n0owcmrt/. JavaScript не требуется.

HTML:

<input type = "checkbox" id = "togglePen" />
<label for = "togglePen"></label>

CSS:

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

label {
    display: inline-block;
    width: 16px;
    height: 16px;
    background: white 
                url('http://i.imgur.com/JOEqZaH.png')
                no-repeat;
    cursor:pointer;
}

input[type = "checkbox"]:checked + label {
    background-image: url('http://i.imgur.com/nJyPSJr.png');
}
27.10.2014
  • Удивительно, спасибо! Я возился с другим способом, используя больше jQuery, и понял это, но ваше решение выглядит чище, и его должно быть легче интегрировать в решение с несколькими флажками jsfiddle.net/bthtyzoh/1 27.10.2014
  • Вы можете использовать комбинацию label и checkbox input для нескольких флажков. Однако каждый флажок должен иметь уникальный идентификатор, который затем устанавливается в качестве значения атрибута for метки. JS/jQuery необходим для подключения метки к своему флажку, если атрибут for не используется. Вот пример последнего использования: jsfiddle.net/63oe4v24. jQuery используется для переключения флажка, обо всем остальном позаботится браузер. 28.10.2014
  • В моей серии книг «Функциональный CSS» я рассказываю о реальных примерах использования HTML и CSS для выполнения задач, которые обычно выполняются с помощью JS/jQuery. Если вам интересно, не стесняйтесь ознакомиться с первыми двумя томами: functionalcss.com. 28.10.2014

    • 2

    Возможно, вы захотите попробовать это без jQuery следующим образом:

    #check-icon label input {
    display: none;
}

#check-icon label span {
    display: block;
}

#check-icon:hover span {
    color: #800000;
}

#check-icon:hover span i {
    text-shadow: 0px 0px 5px #800000;
}

#check-icon span i {
    text-shadow: 0px 0px 0px #800000;
}

#check-icon label input {
    position: absolute;
    top: -20px;
}

#check-icon input:checked + span {
    color: #A00000 ;
}

#check-icon input:checked + span i {
    text-shadow: 0px 0px 10px #C00000;
}

#check-icon:hover input:checked + span {
    color: #800000;
}

#check-icon:hover input:checked + span i {
    text-shadow: 0px 0px 10px #800000;
}
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<div id="check-icon">
  <label>
    <input type="checkbox" value="1"></input>
  <span>
    <i class="fa fa-bug"></i>
  </span>
  </label>
</div>

    http://jsfiddle.net/murtho/bpvoce49/

    30.06.2015
    Новые материалы
    Коллекции публикаций по глубокому обучению
    Последние пару месяцев я создавал коллекции последних академических публикаций по различным подполям глубокого обучения в моем блоге https://amundtveit.com - эта публикация дает обзор 25..
    Представляем: Pepita
    Фреймворк JavaScript с открытым исходным кодом Я знаю, что недостатка в фреймворках JavaScript нет. Но я просто не мог остановиться. Я хотел написать что-то сам, со своими собственными..
    Советы по коду Laravel #2
    1-) Найти // You can specify the columns you need // in when you use the find method on a model User::find(‘id’, [‘email’,’name’]); // You can increment or decrement // a field in..
    Работа с временными рядами спутниковых изображений, часть 3 (аналитика данных)
    Анализ временных рядов спутниковых изображений для данных наблюдений за большой Землей (arXiv) Автор: Рольф Симоэс , Жильберто Камара , Жильберто Кейрос , Фелипе Соуза , Педро Р. Андраде ,..
    3 способа решить квадратное уравнение (3-й мой любимый) -
    1. Методом факторизации — 2. Используя квадратичную формулу — 3. Заполнив квадрат — Давайте поймем это, решив это простое уравнение: Мы пытаемся сделать LHS,..
    Создание VR-миров с A-Frame
    Виртуальная реальность (и дополненная реальность) стали главными модными терминами в образовательных технологиях. С недорогими VR-гарнитурами, такими как Google Cardboard , и использованием..
    Демистификация рекурсии
    КОДЕКС Демистификация рекурсии Упрощенная концепция ошеломляющей О чем весь этот шум? Рекурсия, кажется, единственная тема, от которой у каждого начинающего студента-информатика..