input制作蓝色按钮button样式

最新推荐文章于 2025-07-11 09:05:23 发布

祁焰

最新推荐文章于 2025-07-11 09:05:23 发布

阅读量5k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： ssm 文章标签： input按钮

本文链接：https://blog.youkuaiyun.com/suntao1995/article/details/88890758

ssm 专栏收录该内容

12 篇文章

订阅专栏

本文档详细介绍了如何使用CSS来制作一个具有蓝色外观的input按钮，包括边框、背景色、文字颜色等关键样式设置，适用于网页设计和前端开发。

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

<input type="text" value="" class="mytxt" style="width:200px;height:40px;"/>

.mytxt {
    color:#333;
    line-height:normal;
    font-family:"Microsoft YaHei",Tahoma,Verdana,SimSun;
    font-style:normal;
    font-variant:normal;
    font-size-adjust:none;
    font-stretch:normal;
    font-weight:normal;
    margin-top:0px;
    margin-bottom:0px;
    margin-left:0px;
    padding-top:4px;
    padding-right:4px;
    padding-bottom:4px;
    padding-left:4px;
    font-size:15px;
    outline-width:medium;
    outline-style:none;
    outline-color:invert;
    border-top-left-radius:3px;
    border-top-right-radius:3px;
    border-bottom-left-radius:3px;
    border-bottom-right-radius:3px;
    text-shadow:0px 1px 2px #fff;
    background-attachment:scroll;
    background-repeat:repeat-x;
    background-position-x:left;
    background-position-y:top;
    background-size:auto;
    background-origin:padding-box;
    background-clip:border-box;
    background-color:rgb(255,255,255);
    margin-right:8px;
    border-top-color:#ccc;
    border-right-color:#ccc;
    border-bottom-color:#ccc;
    border-left-color:#ccc;
    border-top-width:1px;
    border-right-width:1px;
    border-bottom-width:1px;
    border-left-width:1px;
    border-top-style:solid;
    border-right-style:solid;
    border-bottom-style:solid;
    border-left-style:solid;
}
.mytxt:focus {
     border: 1px solid #fafafa;
    -webkit-box-shadow: 0px 0px 6px #007eff;
     -moz-box-shadow: 0px 0px 5px #007eff;
     box-shadow: 0px 0px 5px #007eff;   
    

}

实际展示

在这里插入图片描述