Ответ от 2019 года:

Лучший способ (на самом деле единственный способ *) имитировать фактическое событие нажатия, используя только CSS (вместо простого наведения на элемент или создания элемента активным, когда у вас нет mouseUp), - использовать хак с флажком. Он работает, прикрепляя label к элементу <input type="checkbox"> через атрибут label for="".

Эта функция имеет широкую поддержку браузера (псевдокласс :checked IE9+).

Примените одно и то же значение к атрибуту идентификатора <input> и к сопутствующему атрибуту <label> for="", и вы можете указать браузеру изменить стиль метки при нажатии с помощью псевдокласса :checked благодаря тому факту, что щелкнув метку, вы отметите и снимите флажок "связанный" <input type="checkbox">.

* Вы можете смоделировать "выбранное" событие с помощью псевдокласса :active или :focus в IE7+ (например, для кнопки, 50px которой обычно составляет 50px, вы можете изменить ее ширину, когда active: #btnControl:active { width: 75px; }), но это не настоящие события "щелчка". Они "живы" все время, когда элемент выбран (например, с помощью Tab с помощью клавиатуры), что немного отличается от события истинного щелчка, которое запускает действие, обычно - mouseUp.

Базовая демонстрация взлома флажков (базовая структура кода для того, что вы спрашиваете):

label {
    display: block;
    background: lightgrey;
    width: 100px;
    height: 100px;
}

#demo:checked + label {
    background: blue;
    color: white;
}

<input type="checkbox" id="demo"/>
<label for="demo">I'm a square. Click me.</label>

Здесь я разместил метку сразу после ввода в моей разметке. Это #demo того, чтобы я мог использовать соседний селектор брата (клавиша +), чтобы выбрать только метку, которая сразу следует за моим #demo. Поскольку псевдокласс :checked применяется к #demo:checked + label, #demo:checked + label будет применяться только тогда, когда флажок установлен.

Демонстрация изменения размера изображения при нажатии, о чем вы просите:

#btnControl {
    display: none;
}

#btnControl:checked + label > img {
    width: 70px;
    height: 74px;
}

<input type="checkbox" id="btnControl"/>
<label class="btn" for="btnControl"><img src="http://placekitten.com/200/140" id="btnLeft" /></label>

С этим, как говорится, есть некоторые плохие новости. Поскольку ярлык может быть связан только с одним элементом управления формы одновременно, это означает, что вы не можете просто вставить кнопку в теги <label></label> и вызвать ее за день. Тем не менее, мы можем использовать немного CSS, чтобы ярлык выглядел и вел себя достаточно близко к тому, как выглядит и ведет себя кнопка HTML.

Демонстрация для имитации эффекта нажатия кнопки, сверх того, что вы просите:

#btnControl {
    display: none;
}

.btn {
    width: 60px;
    height: 20px;
    background: silver;
    border-radius: 5px;
    padding: 1px 3px;
    box-shadow: 1px 1px 1px #000;
    display: block;
    text-align: center;
    background-image: linear-gradient(to bottom, #f4f5f5, #dfdddd);
    font-family: arial;
    font-size: 12px;
    line-height:20px;
}

.btn:hover {
    background-image: linear-gradient(to bottom, #c3e3fa, #a5defb);
}


.btn:active {
    margin-left: 1px 1px 0;
    box-shadow: -1px -1px 1px #000;
    outline: 1px solid black;
    -moz-outline-radius: 5px;
    background-image: linear-gradient(to top, #f4f5f5, #dfdddd);
}

#btnControl:checked + label {
    width: 70px;
    height: 74px;
    line-height: 74px;
}

<input type="checkbox" id="btnControl"/>
<label class="btn" for="btnControl">Click me!</label>

Большая часть CSS в этой демонстрации предназначена только для стилизации элемента label. Если вам на самом деле не нужна кнопка, и вам подойдет любой старый элемент, вы можете удалить почти все стили в этой демонстрации, аналогично моей второй демонстрации выше.

Вы также заметите, что у меня есть одно префиксное свойство - -moz-outline-radius. Некоторое время назад Mozilla добавила это потрясающее неспецифическое свойство в Firefox, но ребята из WebKit решили, что, к сожалению, добавлять его не собираются. Так что считайте эту линию CSS просто прогрессивным улучшением для людей, которые используют Firefox.

Вы можете использовать pseudo class :target чтобы имитировать событие click, позвольте мне привести пример.

#something {
  display: none;
}

#something:target {
  display: block;
}

<a href="#something">Show</a>
<div id="something">Bingo!</div>

Вот как это выглядит: http://jsfiddle.net/TYhnb/

Следует отметить, что это ограничивается только гиперссылкой, поэтому, если вам нужно использовать не гиперссылку, например кнопку, вы можете немного взломать ее, например, создать гиперссылку, чтобы она выглядела как кнопка.

Если вы дадите элементу a tabindex, вы можете использовать псевдокласс p :focus для моделирования щелчка.

HTML

<img id="btnLeft" tabindex="0" src="http://placehold.it/250x100" />

CSS

#btnLeft:focus{
    width:70px;
    height:74px;
}

http://jsfiddle.net/NaTj5/

Edit: Answered до того, как OP выяснил, чего он хочет. Ниже приведен пример onclick, подобный javascripts onclick, а не псевдокласс :active.

Это может быть достигнуто только с помощью Javascript или Checkbox Hack

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

Демо

TylerH сделал действительно хороший ответ, и мне просто нужно было обновить последнюю версию кнопки.

#btnControl {
    display: none;
}

.btn {
    width: 60px;
    height: 30px;
    background: silver;
    border-radius: 5px;
    padding: 1px 3px;
    box-shadow: 1px 1px 1px #000;
    display: block;
    text-align: center;
    background-image: linear-gradient(to bottom, #f4f5f5, #dfdddd);
    font-family: arial;
    font-size: 12px;
    line-height:30px;
}

.btn:hover {
    background-image: linear-gradient(to bottom, #c3e3fa, #a5defb);
}

.btn:active {
    margin: 1px 1px 0;
    box-shadow: -1px -1px 1px #000;
    background-image: linear-gradient(to top, #f4f5f5, #dfdddd);
}

#btnControl:checked + label {
    width: 70px;
    height: 74px;
    line-height: 74px;
}

<input type="checkbox" id="btnControl"/>
<label class="btn" for="btnControl">Click me!</label>

Хорошо, это, возможно, старое сообщение... но было первым результатом в google и решил сделать свой собственный микс на этом, как..

СРОЧНО Я ИСПОЛЬЗУЮ FOCUS

Причиной этого является то, что он отлично работает для примера, который я показываю, если кто-то хочет событие типа мыши вниз, используйте active

КОД HTML:

<button class="mdT mdI1" ></button>
<button class="mdT mdI2" ></button>
<button class="mdT mdI3" ></button>
<button class="mdT mdI4" ></button>

КОД CSS:

/* Change Button Size/Border/BG Color And Align To Middle */
    .mdT {
        width:96px;
        height:96px;
        border:0px;
        outline:0;
        vertical-align:middle;
        background-color:#AAAAAA;
    }
    .mdT:focus {
        width:256px;
        height:256px;
    }

/* Change Images Depending On Focus */
    .mdI1       {   background-image:url('http://placehold.it/96x96/AAAAAA&text=img1');     }
    .mdI1:focus {   background-image:url('http://placehold.it/256x256/555555&text=Image+1');   }
    .mdI2       {   background-image:url('http://placehold.it/96x96/AAAAAA&text=img2');     }
    .mdI2:focus {   background-image:url('http://placehold.it/256x256/555555&text=Image+2');   }
    .mdI3       {   background-image:url('http://placehold.it/96x96/AAAAAA&text=img3');     }
    .mdI3:focus {   background-image:url('http://placehold.it/256x256/555555&text=Image+3');   }
    .mdI4       {   background-image:url('http://placehold.it/96x96/AAAAAA&text=img4');     }
    .mdI4:focus {   background-image:url('http://placehold.it/256x256/555555&text=Image+4');   }

JS FIDDLE LINK: http://jsfiddle.net/00wwkjux/

Итак, почему я размещаю это в старом потоке, так как примеры здесь меняются, и я подумал о том, чтобы вернуть его сообществу, которое является рабочим примером.

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

.page {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background-color: #121519;
  color: whitesmoke;
}

.controls {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}

.arrow {
  cursor: pointer;
  transition: filter 0.3s ease 0.3s;
}

.arrow:active {
  filter: drop-shadow(0 0 0 steelblue);
  transition: filter 0s;
}

<body class="page">
  <div class="controls">
    <div class="arrow">
      <img src="https://i.imgur.com/JGUoNfS.png" />
    </div>
  </div>
</body>

@TylerH имеет отличный ответ, но это довольно сложное решение. У меня есть решение для тех из вас, кто просто хочет простого эффекта "onclick" с чистым css без кучи дополнительных элементов.

Мы будем просто использовать css-переходы. Вероятно, вы могли бы сделать подобное с анимацией.

Фокус в том, чтобы изменить задержку для перехода, чтобы он продлился, когда пользователь нажимает.

.arrowDownContainer:active,
.arrowDownContainer.clicked {
  filter: drop-shadow(0px 0px 0px steelblue);
  transition: filter 0s;
}

Здесь я добавляю также класс "clicked", чтобы javascript мог также обеспечить эффект, если это необходимо. Я использую фильтр отбрасывания 0px, потому что он будет выделять данный прозрачный графический синий для моего случая.

У меня есть фильтр с 0s здесь, чтобы он не вступил в силу. Когда эффект отпускается, я могу добавить переход с задержкой, чтобы он обеспечил хороший эффект "щелчка".

.arrowDownContainer {
  cursor: pointer;
  position: absolute;
  bottom: 0px;
  top: 490px;
  left: 108px;
  height: 222px;
  width: 495px;
  z-index: 3;
  transition: filter 0.3s ease 0.3s;
}

Это позволяет мне настроить его так, чтобы, когда пользователь нажимает кнопку, он выделяет синий цвет, а затем медленно исчезает (вы, конечно, могли бы использовать и другие эффекты).

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

Ответ Bojangles обычно правилен, однако:

"Единственный способ применить стиль и сохранить его применительно к onclick - это использовать немного JavaScript"

Это не совсем верно в смысле сохранения видимого блока после нажатия. У меня была аналогичная ситуация, мне нужен всплывающий div с onClick, где я не мог добавить JS или изменить разметку /HTML (действительно CSS-решение), и это возможно с некоторыми оговорками. Вы не можете использовать трюк: target, который может создать приятное всплывающее окно, если вы не сможете изменить HTML (чтобы добавить "id" ), чтобы он не был.

В моем случае всплывающее div содержалось внутри другого div, и я хотел, чтобы всплывающее окно отображалось поверх другого div, и это можно сделать, используя комбинацию: active и: hover:

/* Outer div - needs to be relative so we can use absolute positioning */
.clickToShowInfo {
    position: relative;
}
/* When clicking outer div, make inner div visible */
.clickToShowInfo:active .info { display: block; }
/* And hold by staying visible on hover */
.info:hover {
    display: block;
}
/* General settings for popup */
.info {
    position: absolute;
    top: -5;
    display: none;
    z-index: 100;
    background-color: white;
    width: 200px;
    height: 200px;
}

Пример (а также тот, который позволяет щелкнуть по всплывающему окну, чтобы он исчез):

http://davesource.com/Solutions/20150324.CSS-Only-Click-to-Popup-Div/

У меня возникла проблема с элементом, который должен был быть окрашен в RED при наведении и быть ГОЛУБОЙ при щелчке, когда он зависает. Чтобы добиться этого с помощью css, вам нужно, например:

h1:hover { color: red; } 
h1:active { color: blue; }

<h1>This is a heading.</h1>

Я боролся в течение некоторого времени, пока не обнаружил, что порядок селекторов CSS был проблемой, с которой я столкнулся. Проблема заключалась в том, что я переключил места, и активный селектор не работал. Затем я узнал, что :hover сначала :hover а затем :active.

У меня есть приведенный ниже код для наведения мыши и щелчка мыши, и он работает:

//For Mouse Hover
.thumbnail:hover span{ /*CSS for enlarged image*/
    visibility: visible;
    text-align:center;
    vertical-align:middle;
    height: 70%;
    width: 80%;
    top:auto;
    left: 10%;
}

и этот код скрывает изображение, когда вы нажимаете на него:

.thumbnail:active span {
    visibility: hidden;
}

Вы можете использовать: цель

для общей цели

: цель

или фильтр по имени класса

.classname: мишень

или фильтр по имени

#idname: мишень

<style>

#id01:target {      
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
}

.msg{
    display:none;
}

.close{     
    color:white;        
    width: 2rem;
    height: 2rem;
    background-color: black;
    text-align:center;
    margin:20px;
}

</style>


<a href="#id01">Open</a>

<div id="id01" class="msg">    
    <a href="" class="close">&times;</a>
    <p>Some text. Some text. Some text.</p>
    <p>Some text. Some text. Some text.</p>
</div>

Не с реальным css. Вы можете использовать активный, как все остальные здесь сказали или вы используете checkbox/radio hacks, но я бы не рекомендовал его, потому что он ограничивался братьями и сестрами.

Говоря, очевидно, что есть действительно классный плагин POSTcss, который позволяет вам писать:

.menu a:click {
  color: red;
  @action toggle-class("active");
}

и это будет соответствовать javascript:

$(function() {
  $(".menu a").on("click", function () {
    $(this).css({
        "color", "red"
    }).toggleClass("active");
  });

  $(".menu a").on("click", function () {
    $(this).next().show(1000);
  });

  $(".menu a").on("click", function () {
    $('.item').slideToggle();
  });
 });