Кнопка CSS: фокус псевдокласс - PullRequest
Новая
       14

Кнопка CSS: фокус псевдокласс

2 голосов
/ 23 октября 2011

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

Для пояснения, представьте, что у вас есть текстовое поле.Когда вы щелкаете по ней, вы можете добавить границу, потому что она у вас есть, например input:focus{border:#000}, и когда ввод теряет фокус или щелкает другое текстовое поле, свойства границы возвращаются к значениям по умолчанию.

Как мне выполнитьэто с кнопкой.Я чувствую, что мне нужно использовать: после или что-то.

Мой код 

button.top_bar {
    background-color:#E3E3E3;
    border:#DCDCDC 1px solid;
    border-radius:3px;
    height:40px;
    display:block;
    color:#000;
    postion:relative;
    display:block;
    float:left;
    top:5;
    text-transform:capitalize;
    font-family:Arial;
    font-weight:bold;
    cursor:pointer;
    margin-left:15px;
}

button.top_bar:hover {
   border:#9F9F9F 1px solid;
}

button.top_bar:focus {
    border:#9F9F9F 1px solid;
}

Ответы [ 2 ]

2 голосов
/ 23 октября 2011

Единственный способ сделать это - использовать jQuery или какой-то Javascript. Вот как я бы это сделал: я бы управлял им через класс (назовем его «.selectedBorder»). Затем нажмите, возьмите все свои кнопки, которые у вас есть, и отключите границы для всех них, а затем просто добавьте их к нажатой. Вот пример: 

//first you grab the click event for the button(s)
$("#buttons").click(function(){

    //we remove all the borders from all the buttons
    $("#buttons").removeClass("selectedBorder");

    //Now we add the border to the button that's been clicked
    $(this).addClass("selectedBorder");

});

Это должно сработать. Просто добавьте это в тег javascript или во внешний файл и включите его, и все будет хорошо. Надеюсь, это поможет.

1 голос
/ 15 августа 2013

В отличие от ввода текста, некоторые браузеры, кажется, не предоставляют фокус при нажатии на кнопки. Добавьте к элементу кнопки атрибут onclick = "this.focus ()", чтобы вызвать проблему. JQuery не требуется :-)

...