Question

使用css点击后，如何为<button>设置背景颜色？

.myBtn {
    background-color: #fff;
    cursor: pointer;
    color: #000;
    text-decoration: none;
    text-transform: uppercase;
}

HTML：

<button type="button" class="myBtn">Highlight me when Clicked</button>

Answer 1

使用活动选择器。这是一个有效的FIDDLE。

.myBtn:active {
   background-color: #dd4814;
}

检查this以供参考。

修改您也可以使用焦点选择器

.myBtn:focus { background-color: #dd4814; }

但是如果焦点从按钮中消失，颜色将再次变回。

我想你需要借助Javascript或JQuery来改变按钮点击事件的css规则。

Answer 2

抱歉 - 但我没有代表发表评论。但我认为这可能会回答您的问题：Change background on button click, using CSS only?

编辑：哎呀。看起来它会改变整个背景 - 但你可能仍然可以使用它但改变

trait TupleCast<T> {
    type Output;
    fn tuple_cast(self) -> <Self as TupleCast<T>>::Output;
}

impl<T> TupleCast<T> for () {
    type Output = ();
    fn tuple_cast(self) -> <() as TupleCast<T>>::Output {
        ()
    }
}

impl<S, T> TupleCast<T> for (S,) where S: CustomAs<T> {
    type Output = (T,);
    fn tuple_cast(self) -> <(S,) as TupleCast<T>>::Output {
        (self.0.custom_as(),)
    }
}

impl<S, T> TupleCast<T> for (S, S) where S: CustomAs<T> {
    type Output = (T, T);
    fn tuple_cast(self) -> <(S, S) as TupleCast<T>>::Output {
        (self.0.custom_as(), self.1.custom_as())
    }
}

// You would probably have more impls, up to some size limit.

// We can't use std::convert::From, because it isn't defined for the same
// basic types as the `as` operator is... which kinda sucks.  So, we have
// to implement the desired conversions ourselves.
//
// Since this would be hideously tedious, we can use a macro to speed things
// up a little.

trait CustomAs<T> {
    fn custom_as(self) -> T;
}

macro_rules! custom_as_impl {
    ($src:ty:) => {};
    ($src:ty: $dst:ty) => {
        impl CustomAs<$dst> for $src {
            fn custom_as(self) -> $dst {
                self as $dst
            }
        }
    };
    ($src:ty: $dst:ty, $($rest:ty),*) => {
        custom_as_impl! { $src: $dst }
        custom_as_impl! { $src: $($rest),* }
    };
}

// You could obviously list others, or do manual impls.
custom_as_impl! { u16: u16, u32, u64, i32, i64, f32, f64 }

fn main() {
    let x: (u16, u16) = (1, 2);
    let y: (f32, f32) = x.tuple_cast();
    println!("{:?}", y);
}

使用类似这样的按钮类来定位按钮：

input[type="checkbox"]:checked + div{
    background: #5BC0DE;
}

Answer 3

编辑回答：

<html>
<head>
<style>
.myBtn:active{
background-color: red;
}
.myBtn:visited{
background-color: red;
}

</style>
</head>
<body>
<button class ="myBtn">Click here to change bgcolor</button>
</body>
</html>

Answer 4

以下代码是 SCSS 的一个片段。

:root {
  --b1: beige;
  --b2: brown;
  --b3: #654321;
}

#check {
  display: none;
}

.btn {
  background-color: var(--b2);
  padding: 5px;
  border: 1px solid var(--b3);
  font-family: Google Sans;
  font-weight: 600;
  color: var(--b1);
  outline: none;
  border-radius: 5px;
  cursor: pointer;
}

.btn:hover {
  background-color: darken(brown, 5);
  border: 1px solid darken(#654321, 10);
}

使用CSS单击时将背景颜色设置为按钮

4 个答案: