CSS изменить стиль кнопки после щелчка

мне было интересно, есть ли способ изменить стиль кнопки в css после ее нажатия, поэтому не element:active. Спасибо!

10
button css css3 styling

6 ответов

Если вы ищете чистую опцию css, попробуйте использовать псевдо-класс: focus. 

#style  {
    background-color: red;
}

#style:focus {     
    background-color:yellow;    
}
11

каждая ссылка имеет пять различных состояний: link, hover, active, focused и visited.

Link нормальный внешний вид, hover когда вы наведете курсор мыши,active состояние, когда он нажал,focused следующие активные и visited государство вы заканчиваете, когда вы расфокусируй выбранной ссылке.

я предполагаю, что вы хотите достичь другого стиля на любом focus или visited, затем вы можете добавить следующее CSS:

a { color: #00c; }
a:visited { #ccc; }
a:focused { #cc0; }

рекомендуемый порядок в вашем CSS, чтобы не вызвать никаких проблем, следующий:

a
a:visited { ... }
a:focused { ... }
a:hover { ... }
a:active { ... }

вы можете использовать инструменты разработчика вашего веб-браузера, чтобы заставить состояния элемента, как это (Chrome- > Developer Tools / Inspect Element - >Style - >Filter :hov): состояние силы в инструментах разработчика Chrome

8

каков код вашей кнопки? Если это тег a, то вы можете сделать следующее:

a {
  padding: 5px;
  background: green;
}
a:visited {
  background: red;
}
<a href="#">A button</a>

или вы можете использовать jQuery для добавления класса по щелчку, как показано ниже:

$("#button").click(function() {
  $("#button").addClass('button-clicked');
});
.button-clicked {
  background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button">Button</button>
3

Это можно сделать с CSS, только выбрав активный и фокус псевдо элемент кнопки. 

button:active{
    background:olive;
}

button:focus{
    background:olive;
}

см. codepen:http://codepen.io/fennefoss/pen/Bpqdqx

вы также можете написать простую функцию щелчка jQuery, которая изменяет цвет фона.

HTML-код:

<button class="js-click">Click me!</button>

CSS:

button {
  background: none;
}

JavaScript:

  $( ".js-click" ).click(function() {
    $( ".js-click" ).css('background', 'green');
  });

проверьте этот codepen: http://codepen.io/fennefoss/pen/pRxrVG

2

Если ваша кнопка будет <a> элемент, вы можете использовать :visited селектор.

вы ограничены, однако, вы можете изменить только:

  • цвета
  • цвет фона
  • border-color (и его под-свойства)
  • контур-цвет
  • цветовые части свойств заливки и Штриха

Я не читал эта статья о пересмотре :visited но, может быть, некоторые умные люди нашли больше способов взломать его.

1

попробуйте проверить контур на фокус кнопки:

button:focus {
    outline: blue auto 5px; 
}

Если у вас есть, просто установите его в none.

1