webkit

Google浏览器自动记忆填写功能造成input输入框黄色背景解决办法

由 不问归期 提交于 2020-05-09 12:11:29
使用chrome浏览器选择记住密码的账号，输入框会自动加上黄色的背景，有些设计输入框是透明背景的，需要去除掉这个黄色的背景； 方法1：阴影覆盖 （由于是设置颜色覆盖，所以只对非透明的纯色背景有效；） input:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px white inset !important; } 方法2：修改chrome浏览器渲染黄色背景的时间 （透明背景） :-webkit-autofill { transition: background-color 5000s ease-in-out 0s; } 原文链接：http://www.cnblogs.com/19show/p/7844173.html 来源： oschina 链接： https://my.oschina.net/u/4290836/blog/3568235

关于input:-webkit-autofill样式问题

由 天涯浪子 提交于 2020-05-09 10:50:43
　　最近在整理项目的时候，遇到了一个chrome浏览器自动填充的样式问题， 用户名跟密码的input都设置为透明颜色，但是会变成黄色，打开chrome调试工具，发现有个input:-webkit-autofill的 background-color: rgb(250, 255, 189)!important;这个样式，网上查询得三种方案，一种是把input自动输入关闭 autocomplete= "off"，第二种是设置box-shadow阴影覆盖默认样式， input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset; -webkit-text-fill-color: #333; } 　　但是这种只适用于纯色背景 　　第三种是通过延长增加自动填充背景色的方式, 是用户感受不到样式的变化 input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { -webkit-transition-delay: 99999s; -webkit-transition: color 99999s ease-out, background-color

网站表单输入框去除浏览器默认样式

由 人走茶凉 提交于 2020-05-09 10:50:28
网页不可避免的使用到表单，提交一些内容到后端，进行前后端交互。可是由于浏览器总是有各自的默认样式，所以需要对其进行清除。总的来说有以下几种： 1、input输入框获取焦点的时候，默认带蓝色边框，如果设计要求不带蓝色边框可以按照以下方式处理： input{outline:none;} 同时，一些textarea、select、button控件也会带有边框，所以可以在网站的通用css文件中进行如下设置： nput,button,select,textarea{ outline:none;} 2、chrome浏览器自动填充的内容默认带黄色背景色，如何去除呢？可以按照以下方式进行设置： 　 chrome表单自动填充后，input文本框的背景会变成偏黄色的，这是由于chrome会默认给自动填充的input表单加上input:-webkit-autofill私有属性，然后对其赋予以下样式： 在有些情况下，这个黄色的背景会影响到我们界面的效果，尤其是在我们给input文本框使用图片背景的时候，原来的圆角和边框都被覆盖了。具体设置方式如下： 法一：可以对input:-webkit-autofill使用足够大的纯色内阴影来覆盖input输入框的黄色背景： input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset;

三个基于.net的浏览器内核使用的比较

由 匆匆过客 提交于 2020-05-09 07:06:04
最近做模拟登陆发帖相关的项目 分别尝试了基于IE .NET自带的 webbrowser 和 基于WebKit 的WebKit.NET和openWebkitSharp 最开始肯定是用的.NET自带的webbrowser 但是在一个模拟点击的问题上遇到了错误，就是InvokeMerber("click")这个事件没有生效 网上也有和我差不多类似的错误，但是找了一下 没看到有用的解决办法 而且其执行js的办法只有(当然，这个只是目前的发现，后来发现有解决办法)invokeScript(methodName, args)，通过在Document中注入js的办法也可以 实现一定自由的执行js，但总觉得不是很好 于是转战WebKit.NET 用Chrome调试过网页的人一定很喜欢他的Console，虽然IE也支持，但总觉得用的没Chrome用的爽,但IE11改变了很多 WebKit对他最大的好感就是可以自由的执行javascript，虽然他的setAttribute这个功能稳定性很糟糕，也没有webbrowser的getElementsByTagName这个功能， 而且webbrowser提供的RaiseEvent，innerHtml，innerText他好像也不支持 但只要能执行"自由的"js,很多难以解决的问题都不是问题了 其webKitBrowser1

CSS几种简单方法实现文字竖向排版

由 旧街凉风 提交于 2020-05-08 21:05:57
1.一个句子的竖向排列 如图： 1. 2. [html] view plain copy <!DOCTYPE html > < html > < head > < title >test </ title > < meta charset= "UTF-8" > </ head > < style > .one { width: 20px; margin: 0 auto; line-height: 24px; font-size: 20px; } .two { width: 15px; margin: 0 auto; line-height: 24px; font-size: 20px; word-wrap: break-word;/*英文的时候需要加上这句，自动换行*/ } </ style > < body > < div class= "one" >我是竖列排版 </ div > < div class= "two" >I AM ENGLISH </ div > </ body > </ html > 2.多个句子竖向排列（如古诗） 如图： 1. 2. 3. [html] view plain copy <!DOCTYPE html > < html > < head > < title >test </ title > < meta charset= "UTF-8" > </

水平导航-三级导航-切换流畅

由 笑着哭i 提交于 2020-05-08 13:29:40
效果图 index.html <! DOCTYPE html > < html lang ="en" > < head > < meta charset ="UTF-8" > < title > index </ title > < link rel ="stylesheet" href ="css/reset.css" > < link rel ="stylesheet" href ="css/style.css" > </ head > < body > <!-- 导航nav --> < header class ="cd-main-header" > < a class ="cd-logo" href ="#0" >< img src ="images/cd-logo.svg" alt ="Logo" ></ a > < ul class ="cd-header-buttons" > < li >< a class ="cd-search-trigger" href ="#cd-search" > Search < span ></ span ></ a ></ li > < li >< a class ="cd-nav-trigger" href ="#cd-primary-nav" > Menu < span ></ span ></ a ></ li > </ ul >

原生js实现自定义alert风格和实现

由 六眼飞鱼酱① 提交于 2020-05-08 03:47:43
2018年6月29 最新更新 添加函数节流，解决多次点击问题，添加单例模式，提高代码性能。 1 <!DOCTYPE html> 2 <html lang= " en " > 3 4 <head> 5 <meta charset= " UTF-8 " > 6 <title>自定义alert</title> 7 <style type= " text/css " > 8 html, 9 body { 10 padding: 0 ; 11 margin: 0 ; 12 } 13 /* //防止鼠标双击选中文字 14 */ 15 16 div { 17 18 -khtml-user- select : none; 19 /* 早期浏览器 */ 20 user- select : none; 21 } 22 /* //来自animated.css的样式 */ 23 24 .animated { 25 animation- duration: 1s; 26 animation-fill- mode: both; 27 } 28 29 @keyframes bounceInDown { 30 from , 31 60 % , 32 75 % , 33 90 % , 34 to { 35 animation-timing-function: cubic-bezier( 0.215 , 0.610

小程序自定义组件 -- 弹窗

由 我只是一个虾纸丫 提交于 2020-05-08 03:20:45
为什么需要自定义组件？因为小程序通过组件来传值，但小程序没有提供很多传值的方法，所以需要写自定义组件。调用自定义组件 - 传值给组件 - 组件传值出来，开发者需要在组件中写属性及方法等。 原博文章： https://www.jianshu.com/p/8a2a730d9e60 现在来实现弹幕功能 如下： 1. 首先需要单独创建一个组件目录，在目录中新建一个AuglyVideo文件夹，用来存放弹窗组件，结构如下: 2. 组件初始化准备完成。开始写组件相关的配置。我们需要现在自定义组件声明 component 字段为 true //AuglyVideo.json { 　　"component": true, // 自定义组件声明 　　"usingComponents": {} // 可选项，用于引用别的组件 } 接下来组件的页面结构： //AuglyVideo.wxml <view class='wx_dialog_container' hidden="{{!isShow}}"> 　　<view class='wx-mask'></view> 　　<view class='wx-dialog'> 　　　　<view class='wx-dialog-title'>{{ title }}</view> 　　　　<view class='wx-dialog-content'>{{

浅析--border-image

由 半世苍凉 提交于 2020-05-07 19:45:10
border-image用于给border（边框）贴上背景图像 类似于CSS中的background（背景）属性。 例如：background:url(xx.jpg) 27px no-repeat;指的是图片(url(xx.jpg))，位置(27px)，重复性(no-repeat)。 border-image与此类似，border-image包括图片，剪裁位置（与background位置一样，也是数值，也支持百分值），重复性。 例如：border-image:url(border.png) 27 repeat; 指的就是图片(url(border.png))，剪裁位置(27)，重复方式(repeat)。 语法：border-image:source slice repeat; source:所用图像的url地址； slice:1~4个长度值（或者百分比），用于设置图片在每一条边上的距离（区域）； repeat：1~2个关键字，用于设置图片在水平方向和竖直方向的重复方式。取值有以下四种： stretch：默认值，将图片进行拉伸以填充边框的长 repeat：沿边框长平铺图片 round：沿着边框的长整数次的平铺图片（元素可能被自动调整大小以适应该要求） space：沿着边框的长整数次的平铺图片（如果图片不能填满元素，则使用空白填充） 下面我们将border-image的复合写法分解描述
订阅 webkit