`
yhjhoo
  • 浏览: 158742 次
  • 性别: Icon_minigender_1
  • 来自: 郑州
社区版块
存档分类
最新评论

button统一设计 只使用css实现

CSSIEXHTMLHTML 
阅读更多

首先申明这个解决方案是通过CSDN上发问得来的，所以在在CSDN上发问还是很有帮助的。

问题由来，button里面的字数太多，导致在IE里面严重变形，所以需要设计一种button的样式，原来我能想到的只有两种：

一种就在在每个input标记里面加入class属性，看了看input标签的数量和页面的数量，这个打算我放弃了；

另外一种就是在css属性里面定义input，但是这样以来所有的input属性就全部变了。

废话少说，一下是本次的解决方案代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
input[type=button]{
background:#FFFFFF none repeat scroll 0 0;
border:1px solid #DCDDDD;
color:#1E50A2;
display:inline-table;
float:left;
margin:5px 4px 0 0;
padding:2px 4px 1px 3px;
text-align:center;
vertical-align:middle;
}
input[type=button]:hover{
background:#1e50a2;
color:#fff;
}
</style>
</head>

<body>
<input type="button" value="button"/>
<input type="reset" value="reset"/>
<input type="submit" value="submit"/>
<input type="text" value="text"/>
</body>
</html>

分享到：
| IE关闭方法
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    css sprite示例源码

    在网页设计中，特别是在响应式设计中，CSS Sprite被广泛使用。本示例源码将深入探讨这一技术及其应用。 一、CSS Sprite基本原理 CSS Sprite的核心思想是将多个小图像合并到一张大图（称为Sprite图）中，然后通过CSS...

    Flex3.0 使用CSS美化界面

    Flex3.0支持CSS标准选择器，如元素选择器（`button`）、类选择器（`.myClass`）、ID选择器（`#myID`）以及伪类（`:hover`、`:focus`）。此外，Flex还支持组件实例选择器（`[id=myButton]`）和自定义属性选择器（`...

    flex 皮肤样式css+style

    综上所述，"flex 皮肤样式css+style"涉及的知识点包括：Flex的皮肤系统、CSS在Flex中的应用、UI风格的统一以及如何通过CSS文件和SWF文件实现和预览Flex组件的定制皮肤。理解和掌握这些概念对于创建吸引人的、用户...

    使用纯CSS美化radio和checkbox

    在网页设计中，radio（单选按钮）和...通过以上方法，我们可以使用纯CSS实现对radio和checkbox的美化，让网页的交互元素更加吸引人。在实际项目中，你可以根据提供的参考实例进行修改，以适应不同的主题和应用场景。

    后台经典CSS模板

    7. **提示信息**：如警告、成功、错误等提示，这些使用CSS实现的提示框有助于反馈操作结果，增强用户体验。 8. **图标（Icon）**：图标在后台界面中扮演着视觉引导的角色，模板会集成一套完整的图标库，如Font ...

    css样式模板合集

    【CSS样式模板合集】是一份集合了大约70个CSS样式的资源包，专为网页设计者和开发者提供方便快捷的样式应用。这个资源库涵盖了各种常见的网页元素和组件的样式，包括按钮、导航栏、表格、下拉菜单、提示框、表单元素...

    css 网页全套模板

    CSS可以用来美化表单元素，如输入框(input)、选择框(select)、复选框(checkbox)和单选按钮(radio button)，以及提交按钮(submit)等，通过设置边框、背景色、字体样式等属性，使表单更符合整体网站的设计风格。...

    button颜色的控制

    在编程和用户界面设计中，按钮（Button）是常见的交互元素，它的颜色（Color）对于用户体验和视觉效果至关重要。在本教程中，我们将探讨如何控制和自定义按钮的颜色，这适用于初学者，帮助他们理解如何在不同的编程...

    html+css+js表白翻页相册

    最后，为了让相册更具个性化，开发者可能还会运用到一些高级特性，如CSS变量（Custom Properties）来统一管理主题颜色，CSS Grid或Flexbox来实现更复杂的布局，以及JavaScript的Promise或async/await来处理异步操作...

    CSS Reset 样式重置的实现示例.pdf

    《CSS Reset 样式重置的实现》 在网页设计中，CSS Reset（样式重置）是一项基础且至关重要的工作，其目的是消除不同浏览器之间的默认样式差异，确保跨平台、跨浏览器的一致性。默认情况下，每个浏览器都有自己的...

    css美化滚动条

    需要注意的是，这些CSS3的滚动条样式目前仅在Webkit内核的浏览器（如Chrome、Safari）中支持，对于Firefox、Edge等其他浏览器，需要使用它们特定的语法，或者借助JavaScript库实现跨浏览器的滚动条美化。 六、...

    HTML+CSS大作业 环境网页设计与实现(垃圾分类) web前端开发技术 web课程设计 网页规划与设计

    - **响应式设计:** 使用媒体查询(`@media`)等技术实现不同设备下的适应性布局。 - **动画效果:** 利用CSS3的`transition`、`animation`等属性实现平滑过渡或复杂动画效果。 - **颜色与字体:** 设置背景色、文本颜色...

    纯css 右下角定位_并结合js实现关闭功能(兼容多浏览器).zip

    在本项目中，我们主要探讨如何使用纯CSS实现右下角定位，并且结合JavaScript来添加一个关闭功能，确保这个功能在多个浏览器上都能正常工作。这个主题涉及到前端开发中的两个重要技术：CSS样式布局和JavaScript交互。...

    javaweb css样式表

    通过使用CSS，开发者可以轻松地实现内容与样式的分离。这不仅提高了网站的可维护性，还方便了团队合作。例如，在一个开发项目中，程序员可以专注于编写代码逻辑，而设计师则可以专注于网站的视觉设计，两者的分工...

    button按钮图片素材

    在网页设计中，按钮元素是不可或缺的部分，它们用于引导用户执行特定操作，如提交表单、打开链接或触发功能。"button按钮图片素材"是指设计师为...而CSS则为实现这一目标提供了强大的工具，让按钮设计充满无限可能。

    CSS3实现点击鼠标切换日夜模式.rar

    标题中的“CSS3实现点击鼠标切换日夜模式”指的是利用CSS3的特性来创建一个功能，让用户能够通过单击鼠标在网站的昼夜模式之间切换。这个功能对于那些希望为用户提供更个性化阅读体验的网站来说非常有用，尤其是在...

    flex重载Button 文本自动换行

    - 考虑在不同屏幕尺寸下的响应式设计，可能需要调整Button的宽度和高度以适应文本内容。 - 如果有多个Button，保持一致性是很重要的，考虑创建一个统一的样式库或组件库。 通过以上方法，我们可以成功地重载Flex的...

    CSS Sprites 技巧

    2. CSS定义：接着，在CSS样式表中，针对需要使用Sprite图的元素，设置`background-image`为合并后的Sprite图，然后通过`background-position`属性调整背景图片的位置，以显示所需的图像部分。 例如： ```css ....

    CSS3实现发光按钮登录表单特效代码.zip

    在本文中，我们将深入探讨如何使用CSS3来创建具有发光效果的按钮以及登录表单的特效。CSS3作为层叠样式表的最新版本，引入了许多强大的功能，包括过渡（transitions）、动画（animations）和边框半径（border-radius...

    css3 checkbox美化单选按钮和复选按钮美化样式

    本主题聚焦于使用CSS3来美化单选按钮（radio button）和复选按钮（checkbox）。下面将详细介绍如何通过CSS3实现这些效果。 1. **CSS3伪类选择器**： CSS3引入了更多的伪类选择器，如`:checked`，`:disabled`，`:...

Magicbox
Global site tag (gtag.js) - Google Analytics