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>
    ==============================================================
  • 相关阅读:
    Hdu 3564 Another LIS 线段树+LIS
    利用ESLINT进行js 语法检查,以及局部安装时遇到的一些坑
    操作系统杂谈
    算法杂谈
    前端杂谈
    操作系统复习
    vue之——从彩笔的进步之路
    一丢丢学习之webpack4 + Vue单文件组件的应用
    计蒜客 2017复赛 百度地图导航
    electron打包之真的恶心
  • 原文地址:https://www.cnblogs.com/cly84920/p/4426957.html
Copyright © 2011-2022 走看看