input能改变css样式,其修改css样式的方法:1、利用伪类元素改变radio样式;2、利用label指向input,并通过改变label样式来达到效果即可。

本教程操作环境:Dell G3电脑、Windows7系统、HTML5&&CSS3版本。

改变input框默认css样式的方法:

一:利用伪类元素改变radio样式 (此方法无需添加额外的标签,更便捷).div input[type=radio]::after {

position: absolute;

width: 25px;

height: 25px;

background: url(../img/inputBG.jpg) no-repeat;

background-size: 100% 100%;

}

二:利用label指向input,通过改变label样式来达到效果

input[type=checkbox]{

visibility: hidden;

}

label{

width:20px;

height:20px;

border:1px solid #707070;

}

input[type=checkbox]:checked + label{

background: url(../img/duigou.jpg)no-repeat;

background-size: 100% 100%;

}

php input样式,input能改变css样式吗相关推荐

  1. html5 js 修改css样式,关于js改变css样式的写法

    html> 浮动去空格 button { margin: 0; } /*这里clear:both,为的就是当左浮动之后,这个p不会跟着去浮动,如果设置none,那么p元素会跟着浮动*/ p {  ...

  2. js基础总结——js 获取元素节点、js 绑定onclick事件、js 获取属性 修改属性值、js 获取子元素、js 改变css样式

    参考书籍:<JavaScript DOM编程艺术 第2版> 本博客代码的测试页面是:https://www.layui.com/ js dom操作 js 获取元素节点 一份document ...

  3. jQuery基础 - 改变CSS样式

    本文转自:http://www.cnblogs.com/Capricornus/archive/2010/02/10/1667095.html,所有权利归原作者所有. jQuery提供css()的方法 ...

  4. jQuery中添加/改变/移除改变CSS样式例子

    在jquery中对于div样式操作我们会使用到CSS() removeClass() addClass()方法来操作了,下面我们就整理了几个例子大家一起来看看吧. CSS()方法改变CSS样式 css ...

  5. 如何通过js改变css样式,如何通过JS 动态改变CSS样式

    如何通过JS 动态改变CSS样式0 豆豆dou...2013.09.15浏览640次分享举报 .TLIWREGION3CSS { position:absolute; left:32px; top:4 ...

  6. javascript鼠标点击实现改变CSS样式

    javascript通过改变元素class名达到间接改变CSS样式 CSS: /* 字体链接样式 */ td.firstLevelMenuClass a:link {color: #3E8BAC; t ...

  7. 重学前端第一阶段完 钢琴项目(document.querySelector js改变css样式的3种方式 思路 成品)

    菜鸟学完之后,总是感觉学了也还是不会,主要就是因为没有实践,不知道自己到底哪里有问题!虽然说我还没复习完,前端很大一部分都处于模糊阶段,但是感觉还是应该先尽力做一个简单的东西,把这几天学的都用进去,遇 ...

  8. jquery html()样式悠效,jquery怎么用attr()方法判断改变css样式?

    jquery怎么用attr()方法判断改变css样式?下面本篇文章给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. jquery中用attr()方法用于设置或返回被选元 ...

  9. jquery改变css样式和vue改变样式的区别

    jQuery做的就是操作dom节点,从而去改变css样式:而vue不用操作DOM,只关心数据,是从数据绑定的角度去改变样式的 先来看看jQuery,我用的是vue框架,所以先安装jQuery npm ...

  10. js如何修改html样式,怎么用js改变css样式?

    怎么用js改变css样式?下面本篇文章给大家介绍一下使用JavaScript改变css样式的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 怎么用js改变css样式? 1.通过 ...

最新文章

  1. 百度移动终端研发工程师笔试题
  2. Jmeter(六)关联之XPath提取器
  3. python的concat用法_Pandas串联操作concat()用法介绍
  4. 成功解决win10下dos中运行tensorboard --logdir=logs和调用events.out.tfevents一闪而过的问题
  5. Java之通过Collections.synchronizedMap创建线程安全的HashMap
  6. ⼤规模⽆监督预训练语⾔模型与应⽤(上)
  7. 孙宏斌,真的押上了全部身家?
  8. iQOO Pro 5G评测:配置彪悍定价亲民 成功拉低5G手机准入门槛
  9. Nebula Challenge 04
  10. FPGA 芯片被曝严重的 Starbleed 漏洞,影响数据中心IoT工业设备等
  11. Eclpise 和 MyEclipse 的区别
  12. 2020 年最牛逼的 10 门编程语言
  13. windows 远程桌面服务器,Windows系统的远程桌面服务是什么
  14. IDA工具安装、分享
  15. ImageOptim-无损图片压缩Mac版
  16. 如何使用微信编辑器排版微信公众号内容?
  17. MySQL DBLE_MySQL 分库分表 dble简单使用
  18. c语言FD_SET头文件,select()函数以及FD_ZERO、FD_SET、FD_CLR、FD_ISSET
  19. Map和Set,简单模拟实现哈希表以及哈希表部分底层源码的分析
  20. 有你真好,我的程序员老公

热门文章

  1. 如何将kafka中的数据快速导入Hadoop?
  2. SQLite数据库学习小结——Frameworks层实现
  3. LigerUI之Grid使用详解(三)——字典数据展示
  4. cocos2d-iphone 3.X 进度条的实现
  5. 数据库之间的远程操作
  6. windows 2003 上Lotus Notes 客户端无法运行的解决办法
  7. html++留言板增加删除,实现留言板删除留言的具体思路跟操作
  8. wine android6,安卓能跑Windows程序,Wine 2.10开发版发布
  9. Buddy(伙伴)系统分配器之分配page
  10. Ubuntu 16.04下安装激活pycharm 2018.3版本