📜  CSS 单选按钮

📅  最后修改于: 2020-11-05 05:27:30             🧑  作者: Mango

CSS单选按钮

单选按钮是一个HTML元素,有助于从用户那里获取输入。尽管很难设置单选按钮的样式,但伪元素使设置单选按钮的样式更加容易。当需要从一组项目中进行单个选择时,将应用单选按钮。

此HTML元素通常在每个网站上使用,但是在不设置样式的情况下,它们在每个网站上看起来都相似。因此,对它们进行样式设计会使我们的网站与众不同且更具吸引力。使用CSS设计单选按钮是一项有趣且富有创造力的任务,它将为默认单选按钮提供新的外观。

要创建自定义单选按钮,我们需要编写HTML标记,而要样式,则必须编写CSS。

通过使用一些插图,单选按钮的样式将变得清晰。让我们来看一些相同的插图。

在此示例中,我们使用“〜”作为同级组合器。它选择前一个选择器之后的所有元素。当用户将光标移到单选按钮上时,我们还使用伪类:hover设置单选按钮的样式。






Example of Custom Radio Buttons

Select your category

为了更清楚地理解它,我们将看到单选按钮样式的另一个演示。使用CSS设置单选按钮的样式可以使网站看起来更加专业。

例2

 
 
     
         
     
     
        

Example of CSS radio buttons

Click the following radio buttons to see the effect

Male
Female