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

CSS 圆角输入框

    博客分类:
  • java
 
阅读更多

ff,chrome,safari下面可以用圆角边框来实现,IE下面还是用背景比较好 

Java代码  收藏代码
  1. input {    
  2.                 height:18px;    
  3.         inline-height:18px;  
  4.                 font-size:11px;    
  5.                 width:70px;   
  6.         text-align:center;  
  7.         border:#ccc 1px solid;  
  8.         border-radius: 5px; /* css 3标准 */  
  9.         -moz-border-radius: 5px;  /* mozilla */  
  10.         -webkit-border-radius: 5px;  /* webkit */  
  11.  }    
分享到:
评论

相关推荐

    14种CSS3炫酷表单input输入框美化效果

    1. **边框动画效果**:通过CSS3的`border-radius`属性,可以创建圆角输入框,增强视觉舒适度。同时,利用`transition`和`animation`属性可以实现边框颜色的渐变或动态变化,增加表单的动态感。 2. **背景渐变**:...

    iecss3.htc支持输入框圆角

    在网页设计中,为了实现美观的效果,经常需要用到CSS3中的圆角边框(border-radius)属性,让元素的四个角落呈现出圆形或椭圆形的外观。然而,早期版本的Internet Explorer浏览器,尤其是IE8及以下版本,并不支持这...

    15个CSS3动态输入框input框代码

    11. **圆角边框**:`border-radius`属性可以创建圆角输入框,提供更柔和的视觉体验,同时也可以结合过渡效果创建动态的边框形状变化。 12. **输入框内图标**:利用`::before`和`::after`伪元素,可以添加图标作为...

    HTML5+CSS3源码_CSS3实现一款联系表单 输入框带小图标.rar.rar

    例如,可以使用`box-shadow`和`border-radius`属性为输入框添加阴影和圆角,使表单看起来更专业且现代。通过`::before`和`::after`伪元素,可以在输入框前或后添加图标,这些图标可能是用`content`属性插入的Unicode...

    html5配合css3实现带提示文字的输入框

    CSS3提供了多种方法来定制输入框的外观,如边框、背景色、圆角等。下面是一些基本的CSS样式,可以改变输入框的样式: ```css /* 为输入框添加一些基本样式 */ input[type="text"] { width: 200px; padding: 10px;...

    CSS3 美化表单输入框的3种实现方法及代码.rar

    CSS3的边框过渡可以创建圆角输入框,让输入框看起来更加柔和。例如,使用`border-radius`属性设置输入框的四个角的半径: ```css input { border-radius: 5px; } ``` 盒阴影`box-shadow`则可以增加深度感,...

    css解决Webkit 核心文本输入框的高亮

    一种简单直接的方法是通过CSS清除文本输入框和文本区域的默认轮廓样式(outline)。可以使用以下CSS规则: ```css input:focus { outline: none; } textarea:focus { outline: none; } ``` 这种方法的优点在于...

    纯css实现边框圆角效果

    在实际开发中,我们常常会遇到需要对不同类型的元素(如表格单元格、图像、输入框等)应用圆角边框的情况。这些元素可能需要特殊处理,因为它们的默认样式可能会影响`border-radius`的效果。例如,对于`img`元素,...

    关于CSS中圆角设计技术.pdf

    在这样的背景下,CSS圆角设计技术作为提升界面美观性的重要工具之一,成为了前端开发者必须掌握的技能。 CSS中的圆角设计技术可以应用于多种元素,包括按钮、输入框、卡片、弹窗等,它通过简单的代码实现,让这些...

    CSS3实现动态输入框input框特效.zip

    4. **边框半径**:`border-radius`属性允许我们创建圆角效果,使输入框看起来更加柔和,提升设计质感。结合过渡效果,可以让输入框在聚焦时边角变得更加圆润,突出其重要性。 5. **阴影效果**:`box-shadow`可以...

    css3酷炫input框

    动态输入框效果主要涉及以下几个CSS3特性: 1. **边框动画**:使用`border-width`、`border-color`或`border-style`的过渡效果,可以在用户聚焦(input获得焦点)或失去焦点(input失去焦点)时改变边框的状态,实现...

    css3制作的input文本框动画特效

    4. **圆角边框**:`border-radius`允许我们创建圆形或椭圆形的输入框,提升界面的现代感。 5. **自定义占位符**:通过CSS3,我们可以改变`placeholder`文本的颜色、透明度等,甚至可以实现placeholder的动画效果。 ...

    CSS+Jquery实现页面圆角框方法大全

    1. 无图片纯CSS圆角框 这种方法利用多个1像素高的div容器,通过背景色和边框色来模拟圆角框的轮廓。虽然这种做法兼容性好,能适用于所有浏览器,但它存在结构冗余、重用性不强等缺点。对于拥有多个圆角框、不同半径...

    CSS3 input输入框蓝光特效特效代码

    "CSS3 input输入框蓝光特效特效代码"是一个利用CSS3的`transition`过渡属性来实现的动态效果,使得输入框在聚焦时呈现出一种蓝色光芒的效果,增加了网页的互动性和吸引力。 首先,我们来看`input`元素的基本结构。...

    CSS3账号密码输入框提示特效.zip

    在本特效资源中,CSS3被广泛应用于打造输入框的视觉样式,包括设计圆角边框、设置背景颜色、调整边框的宽度和颜色等。尤其值得一提的是,利用CSS3的动画功能,我们实现了输入提示文字的动态效果,如当鼠标悬停或焦点...

    js注册表单错误输入框红色圆角提示效果

    "js注册表单错误输入框红色圆角提示效果"是一个实现这种用户体验优化的实例,它通过JavaScript来动态地向用户提供错误反馈,使得用户能够更快地识别并修正输入错误。以下是对这个知识点的详细解释: 首先,...

    好看的input输入框-合集-各种悬停、选中特效样式-HTML源码

    4. 其他可能的样式:资源包中可能还包括了其他创新的样式设计,如圆角输入框、边框过渡效果、自定义占位符颜色等,这些都能让输入框更加个性化和吸引人。 在实际应用中,这些预设的样式可以轻松地集成到任何HTML...

Global site tag (gtag.js) - Google Analytics