INPUT圆角属性和阴影效果

2024-10-29

为input输入框添加圆角并去除阴影

<input type="text" name="bianhao" value="" placeholder="请输入商品编号" maxlength="10" size="10" style="width:105px; margin:0px 0px 0px 12px;height:22px;border-radius:4px;border:1px solid #DBDBD

圆角属性:border-radius <style type="text/css"> .content{ border: 1px solid green; width: 200px; height: 150px; background-color: grey; /*为了兼容不同浏览器,通常这么写*/ border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; } </style

CSS3 圆角属性 border-radius和-webkit-border-radius使用

CSS3 圆角属性 border-radius 在 CSS3 中新增了一个 border-radius 边框半径属性,即大家常用的圆角效果.这使得制作圆角将不再麻烦,只需对所用对象加一个 border-radius 属性即可,不必使用图片定位或冗余代码完成了.不过它的使用瓶颈目前也是显而易见的,因为效果显示需支持 CSS3 的现代浏览器,而在一些老版本浏览器上则无法显示,如IE8及以下浏览器就不行. CSS3 圆角属性 border-radius 使用方法: 同时设置四个圆角只需给出一个值即可:

HTML中强大的input标签属性

用了许久的html,<input>这个标签是最常用的标签之一. <input type="">标签中type属性是必不可少的,以往我最常用的有 type="text"(单行文本输入) 类型. type="button"(按钮类型). type="password"(密码输入框)等.却忽略了很多很实用却很少用到的属性,这里重新整理一下. 在HTML5中,规定的 input type 属性值如下: 1.bu

HTML 5 <input> placeholder 属性

原文链接:http://www.w3school.com.cn/html5/att_input_placeholder.asp HTML 5 <input> placeholder 属性 HTML 5 <input> 标签实例带有 placeholder 文本的搜索字段: <form action="demo_form.asp" method="get"> <input type="search" n

border-radius 样式表CSS3圆角属性

border-radius 是CSS3圆角属性,用来实现DIV层的4个边框画成圆角. 一.语法: border-radius : none | <length>{1,4} [/ <length>{1,4} ] 如:border-radius:5px 5px 5px 5px; 二.取值: <length>: 由浮点数字和单位标识符组成的长度值.不可为负值. 三.说明: border- radius是一种缩写方法.如果“/”前后的值都存在,那么“/”前面的值设置其水平半径,

HTML5 INPUT新增属性

HTML5的input标签新增了很多属性,也是让大家非常兴奋的一件事,用简单的一个属性搞定以前复杂的JS验证.input新增的这些属性,使得html和js的分工更明确了,使用起来十分舒畅.我们先看下input新增了的属性:新增属性一:autoconmpleteautoconmplete可以赋值为 on 或者 off.当为 on的时候,浏览器能自动存储用户输入的内容.当用户返回到曾经填写过值的页面的时候,浏览器能把用户写过的值自动填写在相应的input框里.现在很多网站都实现了这个功能,不过基本都

IE9、 Firefox、Safari, Chrome的CSS3圆角属性

这篇文章主要是记录一下,微软最新发布的 IE9 浏览器CSS 圆角属性,现在CSS3已经可以轻松实现跨浏览器的圆角效果,包括Firefox高版本,IE9,Safari,Chrome等高端浏览器. 我们这样去定义一个盒子模型: -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius:10px; 在Firefox,和Chrome中的效果: 其中 -moz-border-radius 是 Firefox 实现圆角的私

改进《完美让IE兼容input placeholder属性的jquery实现》的不完美

<完美让IE兼容input placeholder属性的jquery实现>中的代码在IE9以下浏览器中会出错,原因是因为ie9以下的浏览器对input的标签的解释不同. 例如对以下文本框的解释: <input id="itxt" class="itext" type="text" title="这是一个文本框" value="点我输入内容" tabindex="1" m

HTML5 input date属性引起的探索——My97DatePicker（日期选择插件）

不得不说H5的input date属性真的好用,之前我写的http://www.cnblogs.com/tu-0718/p/6729274.html这篇博客里面也有提到,不过虽然移动端对H5的支持还是很好的,但是PC端浏览器对H5的支持就很让人无奈了.然后最近遇到一个需求:需要一个开始时间和结束时间,默认显示年月,如下图: 第一反应想到的是H5的input date属性,因为兼容性问题无奈放弃,然后发现了一个挺好用的插件:DatePicker, 注:在使用此插件时需要注意,DatePicker插

[oldboy-django][2深入django]学生管理（Form）-- 编辑(设置input标签属性，设置input标签默认显示值，设置input的类型）

1 django 后台实现设置input标签属性,设置input标签默认显示值,设置input输入框类型 # Form生成html标签 a. 通过Form生成Input输入框,Form标签,以及submit标签还是要在前端写的, 但是Form标签内的Input标签可以在后台实现:只需要按以下步骤 - views定义StudentForm(Form)类 - views视图函数将Form实例化对象传递给前端 - 前端{{ obj.段 }}即可 b. 通过Form设置前端Input的type属性,即设

HTML5新增input标签属性

一. input type属性 <form action=""> 邮箱<input type="email" name="" id=""> <input type="submit" value="提交"><br /><br /> 手机号码<input type="tel" name="&quo

CSS3 border-radius 圆角属性

使用 CSS3 border-radius 属性,你可以给任何元素制作 "圆角". 浏览器支持表格中的数字表示支持该属性的第一个浏览器的版本号. -webkit- 或 -moz- 前面的数字表示支持该前缀的第一个版本. ie 9+ 谷歌 4.0 -webkit- 火狐 3.0 -moz- Safari 3.1 -webkit- Opera 10.5+ CSS3 border-radius 可以指定4周每个需要的圆角, 位置从左到右为(上到下): 左->右->右->左

input placeholder属性样式修改(颜色,大小,位置)

placeholder属性样式修改 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> input::-webkit-input-placeholder { /* placeholder颜色 */ color: #aab2bd; /* placeholder字体大小 */ font-size: 12p

input checkbox属性-Indeterminate状态

我们在使用input标签,多选框时,通常会看到两种状态,即选中(checked)和被选中(unchecked). // 选中状态也可写成checked="checked" checked:<input type="checkbox" checked> // 未选中状态不写即可 unchecked:<input type="checkbox" unchecked> 但是对于checkbox还有一种模糊状态,这种状态在哪里会看

iphone中 input圆角bug

今天写了个简单的登录注册,在电脑手机(除了iphone)样式都没有问题,但在iphone中却出现了异常,提交的按钮变成圆角被背景渐变的效果,随后又测试两个iphone版都是一个样,断定应该是safari惹的祸. 如图: 搜索一番,果然,是iphone将<input type="submit">和<input type="reset">被safari浏览器解析默认会有个样式,添加圆角边,背景渐变. 解决办法,很简单: input{-web

input常用属性

对于input的使用,大家都很熟悉的,<input> 标签用于搜集用户信息.根据不同的 type 属性值,输入字段拥有很多种形式.输入字段可以是文本字段.复选框.掩码后的文本控件.单选按钮.按钮等等.下面总结下个人经常使用过的一些属性. text 文本域 button 按钮 checkbox 复选 file 文件类型限制 hidden 隐藏域 password 密码域 radio 单选 reset 重置按钮 submit 确认按钮 type="tex

让IE浏览器支持CSS3圆角属性的方法

绘出圆角: 1.下载一个压缩包,里面有一个微软的脚本文件(11KB)和一个用来测试服务器是否有正确的Content-Type的HTML文件:iecss3.rar:.htc 文件是IE内核支持Web行为后用来描述此类行为的脚本文件.它们定义了一套方法和属性,程序员几乎可以把这些方法和属性应用到HTML页面上的任何元素上去.Web 行为是非常伟大的因为它们允许程序员把自定义的功能“连接”到现有的元素和控件,而不是必须让用户下载二进制文件(例如ActiveX 控件)来完成这个功能. 解压后,打开te

iOS设置圆角矩形和阴影效果

1.设置圆角矩形 //设置dropview属性 _dropView.backgroundColor=[[UIColor whiteColor] colorWithAlphaComponent:0.8]; _dropView.layer.cornerRadius = ; _dropView.layer.masksToBounds = YES;//(或者_dropView.clipsToBounds=YES;) 这里masksToBounds或者clipsToBounds的设置是对父视图设置,设置后

javascript div z-index, input tabindex属性说明

<html> <body> <form> 用户名: <input type="text" tabindex="1" /> 密码: <input type="text" tabindex="2" /> 地址: <input type="text" tabindex="3" /> 性别: <input type=&

完美让IE兼容input placeholder属性的jquery实现

调用时直接引用jquery与下面的js就行了,相对网上的大多数例子来说,这个是比较完美的方案. /* * 球到西山沟 * http://www.cnzj5u.com * 2014/11/26 12:12 */ (function ($) { //判断是否支持placeholder function isPlaceholer() { var input = document.createElement("input"); return "placeholder" in