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

CSS按钮与输入框样式设计

最新推荐文章于 2024-05-03 11:17:45 发布

原创最新推荐文章于 2024-05-03 11:17:45 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #CSS

前端同时被 2 个专栏收录

7 篇文章

订阅专栏

CSS

5 篇文章

订阅专栏

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

.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;
}