Кнопка с двумя состояниями CSS - PullRequest
Новая
       0

Кнопка с двумя состояниями CSS

2 голосов
/ 08 февраля 2012

Мне нужен кнопочный элемент управления, у которого есть свойство selected, чтобы при нажатии он оставался нажатым.Что-то вроде кнопки «Очистить ответы» в приведенном ниже примере изображения.

Как это сделать в CSS?Я новичок в CSS.Может ли кто-нибудь предоставить пример или указать на пример, подобный этому?

PS: я знаю, что мне нужно использовать Javascript для обновления логической переменной, которая содержит состояние кнопки, и динамически применять стиль ккнопка.Моя проблема больше похожа на , как создать кнопку, которая содержит флажок , поскольку у меня есть только одно изображение для фона.

http://i.stack.imgur.com/vBV6F.png

Ответы [ 4 ]

4 голосов
/ 08 февраля 2012

Что касается CSS, вы можете сделать следующее: 

<style type='text/css'>
    /* this is the style of an unchecked "button" */
    .input-check{
        display:inline-block;
        height:20px;
        padding:5px 8px;
        background:green;
        width:70px;
        color:white
    }
    /* This is the style for a checked "button" */
    .input-check.checked{
        background:red;
        color:black;
        font-weight:bold
    }
    /* Hide the checkbox */
    .input-check input{
        display:none
    }
</style>

Далее идет HTML.Чтобы уменьшить кодирование JavaScript, лучше всего поместить флажок внутри метки.Это заставит его автоматически обрабатывать установку / снятие флажка при нажатии на ярлык. 

<label class="input-check"><input onchange="change_state(this)" type="checkbox" value="something" name="test"/> click me </label>

Наконец, JavaScript: 

<script type="text/javascript">
    /* If you have more experience in JavaScript, I recommend not binding the change event this way, I didn't bother much about this part, since I guess it isn't part of the question */
    function change_state(obj){
        if (obj.checked){
            //if checkbox is being checked, add a "checked" class
            obj.parentNode.classList.add("checked");
        }
        else{
            //else remove it
            obj.parentNode.classList.remove("checked");
        }
    }
</script>

Это jsFiddle для вас, чтобы проверить.

0 голосов
/ 16 октября 2014

Почему бы просто не установить флажок, чтобы он выглядел как кнопка?

Затем вы можете использовать CSS-псевдо-селектор :checked, чтобы стилизовать его так, как вам нужно, без добавления классов через javascript.

Вот сложный пример в CodePen: http://codepen.io/arjabbar/pen/csafj

0 голосов
/ 08 февраля 2012

См. Раздел здесь под названием кнопка-флажок. Если я правильно понимаю ваш вопрос, похоже, он делает то, что вам нужно, возможно, с небольшими изменениями.

0 голосов
/ 08 февраля 2012

CSS не нужен, если я правильно понимаю, что вы хотите 

<button><input type="checkbox" /> Purge</button>

Тогда вам, вероятно, понадобится javascript, чтобы установить и снять флажок при нажатии кнопки, но основная идея приведена выше.

Вот немного быстрых js 

<html>
<head>
<script type="text/javascript">
function check() {
    var c = document.getElementById('check') ;

    c.checked = (c.checked) ? false : true ;
}
</script>
</head>
<body>
    <button onclick="check()"><input type="checkbox" id="check" /> Purge</button>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...