谷歌浏览器默认样式的修改

1.Chrome自动填充的input背景为黄色:

box-shadow 向框添加阴影,默认是在框外面,inset改为向内添加。

box-shadow :H水平偏移量 V垂直偏移量 B模糊尺寸 S阴影尺寸 C阴影颜色 O/I内外影;

看阴影效果,先确定阴影尺寸,再确定偏移距离。

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 100px white inset !important;  //不能为transparent的任意颜色,利用内部阴影遮住浏览器默认的黄色背景
   box-shadow: 0 0 0px 100px white inset !important;
} 

2.input获得焦点时的蓝色边框

  利用元素的轮廓属性(不占长宽空间),outline: none;即可。

时间: 2024-11-05 21:52:11

谷歌浏览器默认样式的修改的相关文章

js自定义修改复选框单选框样式,清除复选框单选框默认样式

之前做项目的时候,也遇到过需要按照设计稿把<input type="checkbox">和<input type="radio">的默认样式进行修改,但发现,并没有可以重置效果的方法,之前用过-webkit-appearance的方法,但是这个只在webkit内核的浏览器里面生效,火狐不生效. 所以自己写了个js,用li来模拟复选框和单选框的效果,很简单,7行就行. 效果图:  涉及到的知识点:自定义属性来存储点击状态和原来的class名 h

css去除webkit内核的默认样式

做移动端的朋友应该知道,iphone的默认按钮是个很恶心的圆角,select下拉框也有默认样式无法修改. 这时候可以用到 -webkit-appearance:none //去除默认样 在按钮和select样式里加入上面css,效果如下图. css代码如下: input{ background:#FF9933; border-radius:5px; color:#fff; padding:3px 20px; -webkit-appearance:none; } select{ backgroun

去掉或者修改 input、select 等表单的【默认样式 】

隐藏input等表单的默认样式的背景: textarea,select,input{-webkit-appearance: none; -moz-appearance: none; -o-appearance: none; appearance: none;} 让div看起来像按钮: div{appearance:button;-moz-appearance:button; /* Firefox */-webkit-appearance:button; /* Safari 和 Chrome */

radio checkbox 修改默认样式

1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>radio与checbox修改默认样式</title> 7 <style> 8 body{font-size: 12px;} 9 /*radio*/ 10 11 .radio-input label { font-weig

修改input默认样式

不说话,直接上代码 不需要图片,css解决 <!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /&g

怎么修改单选框radio默认样式

jQuery 实现下这个效果,因此不一定是最佳方案,背景图直接从网上找到.:)先把 HTML 码好: <div>   <input type="radio" id="nba" checked="checked" name="sport" value="nba">   <label name="nba" class="checked" fo

修改select默认样式,兼容IE9

前面有篇文章已经提供了如何修改select标签的默认样式,但是只能兼容到ie10,要兼容ie9只能模拟一个类似的 html结构: <div class="select_diy"> <select> <option value="产品咨询1">产品咨询1</option> <option value="产品咨询2">产品咨询2</option> <option value

修改select 默认样式

删除select默认样式图标 appearance:none;-moz-appearance:none;-webkit-appearance:none; 修改样式图标 background: url('../image/getCustomer/arrow_select.png') no-repeat scroll right center #e9f5fe; 原文地址:https://www.cnblogs.com/gosimple/p/8376388.html

纯css修改下拉列表select的默认样式

select的一些默认样式我们很难修改,比如图标的替换.接下来就说说如何修改这些默认样式: html代码: <div> <select name=""> <option value="芝士">芝士</option> <option value="奶油">奶油</option> </select> </div> 给select添加父元素div目的是为了,