zoukankan      html  css  js  c++  java
  • 重定义按钮(type="button" | "submit" | "reset")样式

    重定义按钮的样式是个有点麻烦的事。

    举个例子:
    <style type="text/css">
    input{padding:5px 10px;border:none;}
    </style>

    <input type="button" value="确定" />

    在ff下可以按照我们的意图,按钮默认的边框去掉了,有上下5px的内边距,左右10px的内边距。但ie6和ie7仍然保有边框,而且左右内边距大于10px。我们可以借助overflow:visible;属性,hack掉多余的左右padding。如果设置input的background就可以去掉边框效果。借助两个span标签,我们还可以做出简单的圆角效果。示例如下:
    =====================================================
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>阿当制作</title>
    </head>
    <style type="text/css">
    *{padding:0;margin:0;}
    .btn{margin:10px;display:inline-block;border:1px solid #ccc;border-left:none;border-right:none;}
    .btn span{margin:0 -1px;border:1px solid #ccc;border-top:none;border-bottom:none;display:inline-block;*position:relative;*left:-1px;}
    .btn input{padding:5px 20px;border:none;overflow:visible;background:transparent;}
    </style>
    <body>
    <span class="btn"><span><input type="button" value="确定" /></span></span>
    <span class="btn"><span><input type="button" value="确定" /></span></span>
    <span class="btn"><span><input type="button" value="确定" /></span></span>
    <span class="btn"><span><input type="button" value="确定" /></span></span>
    </body>
    </html>
    ==============================================================
  • 相关阅读:
    让PictureBox支持URL显示图片
    .NET HttpWebRequest/WebClient网络请求第一次很慢解决方案
    SQL 存储过程 分页查询
    LookUpEditPopup自动调整宽度
    安装DotNetCore.1.0.0-VS2015Tools.Preview2失败解决方案
    数据库附加或还原后用户权限问题
    visual studio插件开发dll类库免加全局缓存处理办法
    GZAPI框架初识
    洛谷 P2678 跳石头
    洛谷 P1097 统计数字
  • 原文地址:https://www.cnblogs.com/cly84920/p/4426957.html
Copyright © 2011-2022 走看看