修改bootstrap默认readonly样式灰底为白底

最新推荐文章于 2021-01-08 09:59:48 发布
原创 最新推荐文章于 2021-01-08 09:59:48 发布 · 6.3k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#bootstrap #readonly

本文介绍如何在使用Bootstrap框架时去除Input元素默认的灰色不可编辑背景。提供了两种方法：一是全局修改Bootstrap CSS文件；二是仅修改当前页面的Input样式。

bootstrap的disabled是灰色背景的 readonly也是灰色背景的
但是我的功能中的input只想让它不可编辑但是不要灰色(因为会给人一种不能点的感觉)，所以对于灰底变白底可以有如下两种方式：
1、可以全局修改bootstrap.css去掉步骤3的红框中的内容即可，如图
这里写图片描述
2、可以只针对当前页面进行修改，在input中加上样式即可:style=”background-color: white”,如图
这里写图片描述

姜姜好呢
关注
通过调色板（QPalette）将readonly为true的QLineEdit颜色设置为灰色
danshiming的博客
12-18 2502
当将QLineEdit的readonly为true后，QLineEdit颜色默认情况下依然为白色，现在要设置为灰色（类似disable属性为true的颜色），除了用样式表设置外，调色板也可以实现，代码如下： escapedPatternLineEdit = new QLineEdit; escapedPatternLineEdit->setReadOnly(true); QPalette palette = escapedPatternLineEdit->palett
修改readonly和disabled的样式
高振的博客
09-22 4238
#endDate:read-only{     cursor:pointer; } #endDate:disabled{     cursor:not-allowed; }
input输入框修改placeholder和readonly的样式
若末lan的博客
11-17 3508
之前写过，却没有整理，结果在写的时候又忘了，又要重新查，好麻烦。 现在自己写写，以后就不会忘了。 placeholder： ::-webkit-input-placeholder { /* WebKit browsers */ color: red; } :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color
动态改变样式，如，readOnly, display
小樓東風的专栏
10-21 4062
 1.    readOnly =true/ false ， 是html中的感念。切记在脚本中readOnly的O一定要大写 ，恢复只用把该属性设置为 false。  display， CSS中的display的默认值是"inline"。style="display:"";" // 正常显示对象，与未加display一样。// 增加HTML属性。"   document.g
input输入框设置readonly属性后更改字体颜色
twodays11的博客
08-16 2078
根据业务需求，需要将属性赋值之后改变为不可更改状态。 设置成不可更改有两种方法： 1.readonly 2.disabled 他们两者的区别： 1.readonly只针对input等有效，可以更改字体的颜色 2. disabled对选择框、下拉框等有效，默认是灰色，不能更改字体颜色。 怎样添加readonly： 怎样添加disabled： 给readonly更改字体颜色：（更改颜色放在添加readonly之前） ...
bootstarp input readonly背景色修改
guochanof的专栏
08-09 2571
bootstarp里禁止input输入时,会有背景色,需要重新定义下form-control[readonly]样式，注意用[readonly]， 正确写法: input[readonly],.form-control[readonly]{background-color: #FFFFFF;} 错误写法: 因为bootstarp里有这个样式,所以下面这个写法是不起作用的 ...
修改 bootstrap table 默认detailRow样式的实例代码
08-29
在本文中，我们将深入探讨如何修改 Bootstrap Table 的默认 `detailRow` 样式，以实现自定义的扩展行效果。 在 Bootstrap Table 中，`detailRow` 功能允许用户点击行的某个图标（通常是一个展开/折叠箭头）来显示或...
bootstrap datepicker插件默认英文修改为中文
12-04
datepicker插件默认为英文，而且格式为：mm/dd/yyyy这种情况，看起来不怎么直观。 修改目标： 1、默认显示为中文  2、格式为：yyyy年mm月dd日  需要修改两个地方： 1、更改datas对象， 增加zh-cn语言选项；参见源...
更改BootStrap popover的默认样式及popover简单用法
10-18
要更改Bootstrap popover的默认样式，主要工作集中在修改CSS样式规则上。Popover的默认样式可能包括位置、尺寸、背景颜色、边框、阴影等。通过自定义CSS，可以对这些样式进行修改，以满足特定设计需求。 在提供的...
BootStrap Datepicker 插件修改为默认中文的实现方法
12-09
bootstrap-datepicker 是一个非常优秀的时间选择插件，默认是英文显示日期的，通过下面几个小修改让其支持默认中文 1、首先将 bootstrap-datepicker.js 另存为 utf-8 格式保存 2、增加 cn 语言选项  var dates = $...
readOnly背景灰
kong6001的专栏
11-25 763
<style type="text/css"> <!-- .readonly { background-color:expression(readOnly?'#ccc':'#fff'); } --> </style> <script>     设定表单的calss 为readonly
基于bootstrap图标形状单选按钮radio
06-15
基于bootstrap的单选按钮图标 改变了浏览器自带形状，支持自定义图标
readonly txt 只读变灰
llc87的专栏
02-27 865
readonly style="background-color:#cccccc"
使用bootstarp,redio默认选中和只读
jzhanfeng123的博客
12-19 1004
今天在使用bootstarp写页面时，遇到了一个问题，根据订单的类型，来判断单子，在网上各种百度和使用方法都不行，最后通过同事解决此问题，分享下。 百度的解决方法：KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲lb_dk').attr("c…(’#lb_dk’).attr(“checked”, “true”)…（40分钟...
bootstrap-datepicker实现日期input readonly 标签中选择时间功能
weixin_30344795的博客
07-26 893
bootstrap-datepicker实现日期input readonly 标签中选择时间功能 引用datepicker css,js,zh-CH文件 ps: 都是基于bootstrap，所以得先引入bootstrap文件才可以使用 　　 <link href="https://cdn.bootcss.com/bootstrap...
更改input readonly时的背景色
abckingaa的博客
03-22 8602
disabled 文字会变成灰色，不可编辑。表单序列化提交到后台,会被忽略,不处理. readonly 文字不会变色，与能编辑的输入框看起来没区别,但不能编辑。表单序列化提交到后台,会处理. 我想让不可编辑的input提交到后台, 但readonly的颜色与可输入的一样,用户体验不好. disabled又不能满足要求,只能改了. 增加如下, 背景色就可以变化了,还可...
readOnly属性的去除
ljw_jiawei的博客
07-17 6555
在html中,把readOnly的值改成"false"也是不行的,只要有值就生效 解决办法是: 用js去除整个readOnly属性 if (this.sheAmt > 0){ document.getElementById('txt').setAttribute('readOnly','true') ...
readonly 样式与disable效果一致
weixin_41043580的博客
01-08 550
disable无法的input无法提交表单，如果想要效果和disable一致，还想提交到表单中，则使用readonly。但readonly的效果是还可以监听到点击事件，样式不好看，如果想把点击事件的监听去掉， style里配置 pointer-events:none; 所有效果都不要的style配置： style="border:none;background:#fff;opacity:1;color:black;pointer-events:none;" ...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值