input框和单选按钮美化纯css

咸鱼粑粑

于 2018-03-09 11:54:03 发布

阅读量2.8k

点赞数

分类专栏： input表单美化文章标签： input框 input框美化单选框美化纯css美化input框纯css美化单选框

本文链接：https://blog.youkuaiyun.com/caottao9527/article/details/79495501

版权

本文介绍了如何使用纯CSS技术对input输入框和单选按钮进行美化，包括详细步骤和示例，帮助开发者提升网页表单的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

input美化：

<input type="text" class="dz_text" name="" id="" value="" />

.dz_text{
	display: inline-block; margin-bottom: 20px; border: 1px solid #ccc; padding: 7px 0px;
    padding-left:5px; width: 230px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s
}
.dz_text:focus{
    border-color: #66afe9; outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)
}

单选按钮美化：