写一段css,div选中后红色边框右下角带小三角对勾
时间: 2023-11-17 18:21:53 浏览: 63
可以这样写:
div {
position: relative;
}
div::after {
content: "";
position: absolute;
bottom: -10px;
right: -10px;
border: 10px solid transparent;
border-bottom-color: red;
border-right-color: red;
transform: rotate(45deg);
display: none;
}
div:hover::after {
display: block;
}
div:focus::after {
display: block;
}
这段CSS会在div元素选中时,显示一个红色的右下角三角形对勾。当鼠标悬停在div上时,三角形对勾会出现。同时,当div获得焦点时,也会显示三角形对勾。
相关问题
设置选中后的qcheckbox背景色和对勾颜色
您可以使用CSS来设置QCheckBox选中时的背景色和对勾颜色。以下是一个示例:
```
QCheckBox::indicator:checked {
background-color: #007acc;
border: none;
}
QCheckBox::indicator:checked:disabled {
background-color: #c8c8c8;
border: none;
}
QCheckBox::indicator:unchecked {
background-color: transparent;
border: 1px solid #c8c8c8;
}
QCheckBox::indicator:unchecked:disabled {
background-color: transparent;
border: 1px solid #c8c8c8;
}
QCheckBox::indicator:checked::indicator:checked {
image: url(checked.png);
}
QCheckBox::indicator:unchecked::indicator:unchecked {
image: url(unchecked.png);
}
```
其中,`QCheckBox::indicator:checked`设置了选中时的背景色和去掉边框,`QCheckBox::indicator:checked:disabled`设置了选中且不可用时的背景色和去掉边框,`QCheckBox::indicator:unchecked`设置了未选中时的边框颜色,`QCheckBox::indicator:unchecked:disabled`设置了未选中且不可用时的边框颜色。`QCheckBox::indicator:checked::indicator:checked`设置了选中时的对勾颜色,`QCheckBox::indicator:unchecked::indicator:unchecked`设置了未选中时的对勾颜色。
您可以根据需要自定义这些颜色和图片。
我想通过列表实现,选择每一项,每一项后边有一个对勾表示选中
好的,你可以使用 Android 的 ListView 控件来实现一个列表选择器,通过设置列表项的布局实现每一项后边有一个对勾表示选中。下面是一个基于 Kotlin 的示例代码,可以通过 ListView 控件实现一个列表选择器:
1. 定义一个列表项布局文件 list_item.xml,用于显示每个列表项的内容和选中状态,代码如下:
```xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dp">
<TextView
android:id="@+id/item_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="18sp"
android:textColor="@android:color/black"
android:layout_centerVertical="true"/>
<ImageView
android:id="@+id/item_check"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/check"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:visibility="invisible"/>
</RelativeLayout>
```
以上代码中,我们使用了一个 RelativeLayout 布局,包含了一个 TextView 和一个 ImageView。TextView 用于显示列表项的文本内容,ImageView 用于显示选中状态的对勾图标。ImageView 的 visibility 属性设置为 invisible,表示默认情况下不显示对勾图标。
2. 在 Activity 中,使用 ListView 控件显示列表项,代码如下:
```kotlin
val timeList = arrayOf("5 Minutes", "10 Minutes", "30 Minutes")
val adapter = ArrayAdapter<String>(this, R.layout.list_item, timeList)
listView.adapter = adapter
// 监听列表项的选中状态
listView.setOnItemClickListener { _, view, position, _ ->
// 获取选中的列表项中的 TextView 和 ImageView
val itemText = view.findViewById<TextView>(R.id.item_text)
val itemCheck = view.findViewById<ImageView>(R.id.item_check)
// 显示或隐藏选中状态的对勾图标
if (itemCheck.visibility == View.VISIBLE) {
itemCheck.visibility = View.INVISIBLE
} else {
itemCheck.visibility = View.VISIBLE
}
// 获取用户选择的时间
val selectedTime = itemText.text.toString()
}
```
以上代码中,我们定义了一个时间列表 `timeList`,然后创建了一个 ArrayAdapter,将时间列表显示在 ListView 控件中。接着,我们使用 `listView.setOnItemClickListener()` 方法监听列表项的选中状态,获取选中的列表项中的 TextView 和 ImageView,根据 ImageView 的 visibility 属性显示或隐藏选中状态的对勾图标。最后,获取用户选择的时间。
你可以将上述代码放在你的 Android 应用程序中的适当位置,例如一个按钮的点击事件中,以便用户可以通过点击按钮来选择时间。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)