常用的css样式（按钮下拉框输入框文本域）

最新推荐文章于 2025-05-11 18:19:28 发布

鹿与飞鱼

最新推荐文章于 2025-05-11 18:19:28 发布

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端 CSS 文章标签：前端 CSS

本文链接：https://blog.youkuaiyun.com/a_lazy_fish/article/details/96963957

前端同时被 2 个专栏收录

7 篇文章

订阅专栏

CSS

5 篇文章

订阅专栏

本文介绍了一种CSS样式设计方法，用于美化网页上的按钮和输入框等元素。包括按钮的基本样式设置、悬停效果、选择框及文本输入框的设计，并提供了聚焦状态的样式修改。

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

.btnDesign {
width:90px;
height:30px;
line-height:30px;
background:rgba(24,111,231,1);
box-shadow:0px 5px 10px 0px rgba(24,111,231,0.55);
border-radius:15px;
font-size:14px;
font-family:MicrosoftYaHei-Bold;
font-weight:bold;
color:rgba(255,254,254,1);
border:none;
outline: none;
}

//移入样式
.btnDesign:hover{
opacity:.8;filter:alpha(opacity=80);color:#fff;
}
在这里插入图片描述

.selectDesign {
width:110px;
height:30px;
line-height:30px;
background:rgba(255,255,255,1);
border:1px solid rgba(204,204,204,1);
border-radius:15px;
text-indent:5px;
outline: none;
}
在这里插入图片描述

.inputDesign {
width:338px;
height:30px;
background:rgba(255,255,255,1);
border:1px solid rgba(204,204,204,1);
border-radius:18px;
text-indent:5px;
outline: none;
}

//聚焦样式
.inputDesign:focus {
border: 1px solid #186FE7;
}
在这里插入图片描述
.textareaDesign {
width:338px;
height:90px;
background:rgba(255,255,255,1);
border:1px solid rgba(204,204,204,1);
border-radius:6px;
padding-left:5px;
outline: none;
}
.textareaDesign:focus {
border: 1px solid #186FE7;
}