如何设置disabled 样式鼠标样式

1、disabled:
(1)在input中加入disabled可使表单禁用,如图:
&input class="form-control input-lg" id="disabledInput" type="text" placeholder="表单已被禁用,不可输入" disabled&&/div&
(2)如果fieldset设置了disabled属性,整个域都将处于被禁用状态,如图:
&fieldset disabled&
&div class="form-group"&
&label for="disabledTextInput"&禁用的输入框&/label&
&input type="text" id="disabledTextInput" class="form-control" placeholder="禁止输入"&
&div class="form-group"&
&label for="disabledSelect"&禁用的下拉框&/label&
&select id="disabledSelect" class="form-control"&
&option&不可选择&/option&
&/fieldset&
2、legend:如果legend中有输入框的话,这个输入框是无法被禁用的,如图:
&&legend&&input type="text" class="form-control" placeholder="显然我颜色变灰了,但是我没被禁用,不信?单击试一下" /&&/legend&
3、表单验证状态:加上has-feedback,并且加一个
&span class="glyphiconglyphicon-ok form-control-feedback"&&/span&
标签,才会出现小图标;在&input&下面加上&span&class="help-block"&来显示&你们输入的正确信息&。
&form role="form"&
&div class="form-group has-success has-feedback"&
&label class="control-label" for="inputSuccess1"&成功状态&/label&
&input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" &
&span class="help-block"&你输入的信息是正确的&/span&
&span class="glyphicon glyphicon-ok form-control-feedback"&&/span&
&div class="form-group has-warning has-feedback"&
&label class="control-label" for="inputWarning1"&警告状态&/label&
&input type="text" class="form-control" id="inputWarning1" placeholder="警告状态"&
&span class="help-block"&请输入正确信息&/span&
&span class="glyphicon glyphicon-warning-sign form-control-feedback"&&/span&
&div class="form-group has-error has-feedback"&
&label class="control-label" for="inputError1"&错误状态&/label&
&input type="text" class="form-control" id="inputError1" placeholder="错误状态"&
&span class="help-block"&你是输入的信息是错误的&/span&
&span class="glyphicon glyphicon-remove form-control-feedback"&&/span&
&/div&&/form&
阅读(...) 评论()欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!您的位置: >
> Css cursor鼠标指针鼠标光标样式教程篇
我们在布局时候,我们会遇到对对象内鼠标指针光标进行控制,比如鼠标经过指针变为手指形状等样式,接下来我们介绍鼠标指针样式cursor控制。系统默认鼠标指针样式外,可以通过设置图片为鼠标指针,常见有些网站鼠标指针是各种各样小图片样式,当然这个是通过css cursor设置鼠标样式。
扩展阅读:
一、cursor语法与结构
1、cursor语法:
cursor : auto | crosshair | default | hand | move | help | wait | text | w-resize |s-resize | n-resize |e-resize | ne-resize |sw-resize | se-resize | nw-resize |pointer | url (url)
常用cursor光标说明
1)、{ cursor:default&}默认正常鼠标指针
2)、div{ cursor:hand }和div{ cursor:text } 文本选择效果
3)、div{ cursor:move } 移动选择效果
4)、div{ cursor:pointer } 手指形状 链接选择效果
5)、div{&cursor:url(url图片地址) }设置对象为图片
2、cursor样式效果图
css cursor鼠标光标指针样式图
3、鼠标指针说明
cursor设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。
4、布局结构
p { cursor: }
/* : 设置鼠标移动到对象时鼠标变为文本选择样式 */
a { cursor: } /* css注释: 设置鼠标移动到a超链接对象时鼠标变为手指形状(链接选择) */
{ cursor: url(&小图片地址&)} /* 设置鼠标指针默认为一个小图片 */
扩展阅读:、、a hover、
二、鼠标指针样式总结
鼠标指针样式控制设置是比较常用的,比如日常我们在布局时候,我们希望鼠标指向某个局部对象时候,鼠标指针光标就变为手指状态,这个时候我们就对对象span设置cursor: pointer即可。以上我们图例展示常用的鼠标光标形状与css单词,希望布局时候更加自身需要选择设置鼠标指针样式。需要注意是,光标切记勿滥用,也不要轻易设置自定义图片为鼠标样式这样会将网页造成复杂与不符合用户体验感觉,切记光标慎用。如需转载,请注明文章出处和来源网址:我要分享到:上一篇: 下一篇: 必备CSS教程 Essential CSS Tutorials• • • • • • • ()• • ()• ()• • • • • • • • • • •
必备HTML基础教程 Essential HTML Tutorials •
• () • () • () •
• () •
• () •
• &最新文章NEWS• • • • • • • • • • 相关文章RELATED• • • • • • • • • • CSS EFFECTS / CSS MODULE如对文章有任何疑问请提交到,或有任何网页制作CSS问题立即到发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。文章修订日期: 11:47
原创:本文 DIVCSS5版权所有。
学习与资源分享平台18:26 提问
ie11 input disabled不会置灰,但是是不可点的
按赞数排序
浏览器对disable的处理稍有不同,如果想要置灰,建议自己加一个css样式吧
会变灰,是不是你的btn002这个样式设置过边框和背景色了
自己加一个css设置一下就好
其他相关推荐方法1: onfocus=this.blur()&
&input type=&text& name=&input1& value=&中国& onfocus=this.blur()&&
方法2:readonly&
&input type=&text& name=&input1& value=&中国& readonly&&
&input type=&text& name=&input1& value=&中国& readonly=&true&&&
方法3: disabled&
&input type=&text& name=&input1& value=&中国& disabled&
Readonly和Disabled它们都能够做到使用户不能够更改表单域中的内容。但是它们之间有着微小的差别,总结如下:
Readonly只针对input(text / password)和textarea有效,而disabled对于所有的表单元素都有效,但是表单元素在使用了disabled后,当我们将表单以POST或GET的方式提交的话,这个元素的值不会被传递出去,而readonly会将该值传递出去(readonly接受值更改可以回传,disable接受改但不回传数据)。
一般比较常用的情况是:
在某个表单中为用户预填了某个唯一识别代码,不允许用户改动,但是在提交时需要传递该值,此时应该将它的属性设置为readonly 。
经常遇到当用户正式提交了表单后需要等待管理员的信息验证,这就不允许用户再更改表单中的数据,而是只能够查看,由于disabled的作用元素范围大,所以此时应该使用disabled,但同时应该注意的是要将submit button也disabled掉,否则只要用户按了这个按钮,如果在数据库操作页面中没有做完整性检测的话,数据库中的值就会被清除。如果说在这种情况下用readonly来代替disabled的话,若表单中只有input(text / password)和textarea元素,那还是可以的,如果存在其他发元素,比如select,用户可以在重新改写值后按回车键进行提交(回车是默认的submit触发按键)
我们常常在用户按了提交按钮后,利用javascript将提交按钮disabled掉,这样可以防止网络条件比较差的环境下,用户反复点提交按钮导致数据冗余地存入数据库。
disabled和readonly这两个属性有一些共同之处,比如都设为true,则form属性将不能被编辑,往往在写js代码的时候容易混合使用这两个属性,其实他们之间是有一定区别的:
如果一个输入项的disabled设为true,则该表单输入项不能获取焦点,用户的所有操作(鼠标点击和键盘输入等)对该输入项都无效,最重要的一点是当提交表单时,这个表单输入项将不会被提交。
而readonly只是针对文本输入框这类可以输入文本的输入项,如果设为true,用户只是不能编辑对应的文本,但是仍然可以聚焦焦点,并且在提交表单的时候,该输入项会作为form的一项提交。
本文已收录于以下专栏:
相关文章推荐
利用 XHTML
一 先看看这两个属性在效果和使用上的区别
1 readonly是要锁定这个控件,通过在界面上无法修改他(但是通过javascript可以修改他)。
2 disabled 和readonly有相...
Jquery的api中提供了对元素应用disabled和readonly属性的方法,在这里记录下。如下:
1.readonly
 $('input').attr(&readonly&,&re...
转载:http://www.nowamagic.net/html/html_ReadonlyAndDisabled.php
Readonly和Disabled是用在表单中的两个属性,它们都能够做到使用...
Readonly和Disabled是用在表单中的两个属性,它们都能够做到使用户不能够更改表单域中的内容。但是它们之间有着微小的差别,总结如下:
Readonly只针对input(text / p...
Readonly和Disabled是用在表单中的两个属性,它们都能够做到使用户不能够更改表单域中的内容。但是它们之间有着微小的差别,总结如下: Readonly只针对input(text / pass...
表单中Readonly和Disabled的区别
Readonly和Disabled是用在表单中的两个属性,它们都能够做到使用户不能够更改表单域中的内容。但是它们之间有...
原文地址:/zcy_soft/archive//2181211.html
html input
readonly 和 di...
Readonly和Disabled是用在表单中的两个属性,它们都能够做到使用户不能够更改表单域中的内容。但是它们之间有着微小的差别,总结如下:
Readonly只针对input(text / p...
Readonly和Disabled是用在表单中的两个属性,它们都能够做到使用户不能够更改表单域中的内容。但是它们之间有着微小的差别,总结如下:
Readonly只针对input(text /...
他的最新文章
讲师:汪剑
讲师:刘道宽
您举报文章:
举报原因:
原文地址:
原因补充:
(最多只允许输入30个字)禁用状态按钮的鼠标指针形状?
源码中:cursor: not-为什么没起作用?
写下你的评论...
我的意思是,在按钮元素上采用了你讲的方法1或方法2以后,当鼠标移到该按钮上时,鼠标图标没有变化。
按照源码cursor: not-鼠标图标应该会变成红色的圆圈中间斜杠的样式。
写下你的评论...
我问的问题是“为什么源码中的CSS样式没有生效?”
你回答的问题是“怎样实现鼠标移动到按钮上,指针图标变化?”
写下你的评论...
写下你的评论...
Copyright (C)
All Rights Reserved | 京ICP备 号-2}

我要回帖

更多关于 disabled 样式 的文章

更多推荐

版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。

点击添加站长微信