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

最新推荐文章于 2024-05-07 10:21:48 发布
最新推荐文章于 2024-05-07 10:21:48 发布
阅读量6.1k 收藏
点赞数 1
文章标签： bootstrap readonly
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Jamie_Jiang/article/details/81282375
版权

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

姜姜好呢
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
CSS：好玩的‘伪类’系列之——(:read-write与:read-only)
gavincz的博客
04-30 431
:read-write 定义：当一个元素（例如可输入文本的 input元素）可以被用户编辑时，修改样式。 触发条件：当一个元素是可编辑元素时，可以修改其样式 兼容：IE不支持 :read-only 定义：当一个可编辑元素（例如可输入文本的 input元素）不可被用户编辑，即只读时（具有readonly属性时），修改样式。 触发条件：只针对当一个可编辑元素被赋予readonly（只读）属...
修改 bootstrap table 默认detailRow样式的实例代码
08-29
在本文中，我们将深入探讨如何修改 Bootstrap Table 的默认 `detailRow` 样式，以实现自定义的扩展行效果。 在 Bootstrap Table 中，`detailRow` 功能允许用户点击行的某个图标（通常是一个展开/折叠箭头）来显示或...
input输入框修改placeholder和readonly的样式
若末lan的博客
11-17 3381
之前写过，却没有整理，结果在写的时候又忘了，又要重新查，好麻烦。 现在自己写写，以后就不会忘了。 placeholder： ::-webkit-input-placeholder { /* WebKit browsers */ color: red; } :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color
Bootstrap 5-背景颜色
最新发布
m0_73839298的博客
05-07 252
【代码】Bootstrap 5-背景颜色。
动态改变样式，如，readOnly, display
小樓東風的专栏
10-21 3976
 1.    readOnly =true/ false ， 是html中的感念。切记在脚本中readOnly的O一定要大写 ，恢复只用把该属性设置为 false。  display， CSS中的display的默认值是"inline"。style="display:"";" // 正常显示对象，与未加display一样。// 增加HTML属性。"   document.g
input输入框设置readonly属性后更改字体颜色
twodays11的博客
08-16 1882
根据业务需求，需要将属性赋值之后改变为不可更改状态。 设置成不可更改有两种方法： 1.readonly 2.disabled 他们两者的区别： 1.readonly只针对input等有效，可以更改字体的颜色 2. disabled对选择框、下拉框等有效，默认是灰色，不能更改字体颜色。 怎样添加readonly： 怎样添加disabled： 给readonly更改字体颜色：（更改颜色放在添加readonly之前） ...
bootstarp input readonly背景色修改
guochanof的专栏
08-09 2430
bootstarp里禁止input输入时,会有背景色,需要重新定义下form-control[readonly]样式，注意用[readonly]， 正确写法: input[readonly],.form-control[readonly]{background-color: #FFFFFF;} 错误写法: 因为bootstarp里有这个样式,所以下面这个写法是不起作用的 ...
更改BootStrap popover的默认样式及popover简单用法
10-18
主要介绍了更改BootStrap popover的默认样式及popover简单用法,需要的朋友可以参考下
bootstrap datepicker插件默认英文修改为中文
12-04
datepicker插件默认为英文，而且格式为：mm/dd/yyyy这种情况，看起来不怎么直观。 修改目标： 1、默认显示为中文  2、格式为：yyyy年mm月dd日  需要修改两个地方： 1、更改datas对象， 增加zh-cn语言选项；参见源...
BootStrap Datepicker 插件修改为默认中文的实现方法
12-09
bootstrap-datepicker 是一个非常优秀的时间选择插件，默认是英文显示日期的，通过下面几个小修改让其支持默认中文 1、首先将 bootstrap-datepicker.js 另存为 utf-8 格式保存 2、增加 cn 语言选项  var dates = $...
修改readonly和disabled的样式
高振的博客
09-22 4151
#endDate:read-only{     cursor:pointer; } #endDate:disabled{     cursor:not-allowed; }
基于bootstrap图标形状单选按钮radio
06-15
基于bootstrap的单选按钮图标 改变了浏览器自带形状，支持自定义图标
使用bootstarp,redio默认选中和只读
jzhanfeng123的博客
12-19 915
今天在使用bootstarp写页面时，遇到了一个问题，根据订单的类型，来判断单子，在网上各种百度和使用方法都不行，最后通过同事解决此问题，分享下。 百度的解决方法：KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲lb_dk').attr("c…(’#lb_dk’).attr(“checked”, “true”)…（40分钟...
readOnly属性的去除
ljw_jiawei的博客
07-17 6410
在html中,把readOnly的值改成"false"也是不行的,只要有值就生效 解决办法是: 用js去除整个readOnly属性 if (this.sheAmt > 0){ document.getElementById('txt').setAttribute('readOnly','true') ...
readonly 样式与disable效果一致
weixin_41043580的博客
01-08 456
disable无法的input无法提交表单，如果想要效果和disable一致，还想提交到表单中，则使用readonly。但readonly的效果是还可以监听到点击事件，样式不好看，如果想把点击事件的监听去掉， style里配置 pointer-events:none; 所有效果都不要的style配置： style="border:none;background:#fff;opacity:1;color:black;pointer-events:none;" ...
jquery设置readonly文本框样式
jslfl的专栏
09-09 641
$(function(){ $("input[type='text'][readonly='readonly']").each(function (){ this.css("bacolor","red"); }); }) 还没有测试过... :oops:
前端 表单中的readOnly 和 disabled有什么区别？
qq_44327851的博客
04-24 393
readOnly和disabled是两种在表单元素中设置的属性，用于控制用户对表单元素的操作权限。
bootstrap-switch,切换触发事件及动态切换以及readonly属性设置
zhangustb
08-07 1389
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"> <link h.
更改bootstrap4的样式
05-17
要更改 Bootstrap 4 的样式，你可以使用自定义 CSS。以下是一些方法： 1. 在 HTML 文件中添加自定义 CSS 样式 在你的 HTML 文件中，你可以通过 `<style>` 标签或外部 CSS 文件来添加自定义 CSS 样式。例如，你可以在 `<head>` 标签内添加以下代码： ```html <head> <link rel="stylesheet" href="custom.css"> </head> ``` 这将链接到一个名为 `custom.css` 的外部 CSS 文件，其中包含你的自定义样式。 2. 更改 Bootstrap 变量 Bootstrap 4 提供了许多可配置的 Sass 变量，你可以使用这些变量来更改 Bootstrap 的默认值。例如，你可以使用以下代码更改导航栏的背景颜色： ```scss $navbar-bg: #f00; ``` 将此代码添加到你的 Sass 文件中，并编译为 CSS。 3. 覆盖 Bootstrap 样式 你还可以覆盖 Bootstrap 的默认样式。例如，如果你想更改按钮的边框颜色和宽度，你可以使用以下 CSS 代码： ```css .btn { border-color: #f00; border-width: 2px; } ``` 将此代码添加到你的自定义 CSS 文件中。 总之，使用自定义 CSS，更改 Bootstrap 变量或覆盖 Bootstrap 样式都是更改 Bootstrap 样式的有效方法。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值