chrome中文本框样式问题

  在用bootstrap开发一个登录表单时,在chrome浏览器测试发现以下问题。

  1 在text输入框中重复输入相同内容时会有提示

  

  单击提示框内容后文本框会出现黄色背景。

  

  调试发现,chrome浏览器会自动给文本框添加如下样式 

  input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
    background-color: rgb(250, 255, 189);
    background-image: none;
    color: rgb(0, 0, 0);
  }

  解决方法:在<form>标签中添加属性autocomplete="off"。

  2 输入框获得焦点时出现蓝色边框特效,如上面几幅图。

  解决方法:input{outline:medium;}

  

时间: 2024-08-03 01:30:31

chrome中文本框样式问题的相关文章

axure切换焦点文本框样式

在之前的文章中,我们介绍过在axure中自定义文本框样式的方法,今天我们再深入一些,当文本框的焦点发生变化时,动态切换焦点文本框的样式. 先看效果: 制作步骤: 先把文本框的默认样式做出来: 拖入两个文本框,分别命名为用户名.密码,隐藏边框,设置好提示文字:. 拖入两个矩形,设置高度略大于文本框,边框颜色为浅灰色,分别命名为用户名边框.密码边框,分别把两个文本框置于对应的边框上方. 开始做交互,当文本框获取焦点时,改变边框颜色: 当文本框获取焦点时,把对应的边框矩形设置为选中状态,失去焦点时,取

css设置input文本框样式代码实例

css设置input文本框样式代码实例:使用css设置input元素的样式是最为常用的操作之一,当然也是最为基础的操作,可能对于刚刚接触css的朋友还不够熟悉,下面就通过一段简单的代码历史演示一下如何设置文本框的样式,当然这个演示可能并不是特别的美观,这里的目的也只是起到一个演示作用,代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="

axure自定义文本框样式

axure中的文本框是我们经常使用的元件,但它本身对样式的设置很有限,不能设置边框样式.阴影等,不能满足我们制作高保真原型的需求,本文给大家介绍一下结合矩形元件自定义文本框样式.(PS:此处的"高保真"指的是UI上的设计,对于原型保真程度的说明,请参考我的另一片文章<产品原型设计浅见>). 如果我们要制作下图这种圆角输入框,首先拖入一个文本框.一个矩形到设计区域,将矩形置于底层,调整矩形的大小能够刚刚包围住文本框,给矩形增加一点圆角,把矩形的颜色弄浅一点,我设置的色值是#9

文本框样式width100%超过父容器

input[type="text"] { width: 100%; box-sizing: border-box; -webkit-box-sizing:border-box; -moz-box-sizing: border-box; } 解决文本框样式width:100%超过父容器!!! 转载自:http://blog.csdn.net/xiaochunyong/article/details/7517210

各种各样的文本框滚动栏样式代码 滚动栏样式 文本框样式(文本框样式大全)

<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-face-color: #FFFFFF; scrollbar-shadow-color: #885C10; scrollbar-highlight-color: #F8ECD8; scrollbar-3dlight-color: #885C10; scrollbar-darkshadow-color:

Chrome中输入框默认样式移除

Chrome中输入框默认样式移除 在chrome浏览器中会默认给页面上的输入框如input.textarea等渲染浏览器自带的边框效果 IE8中效果如下: Chrome中效果如下:   这在我们未给输入框设置获取焦点时改变边框颜色时,chrome浏览器解析页面中默认将输入框获取焦点时改变边框效果,这给我们带来了极大的方便.如果我们要自己设置边框色时,chrome浏览器的默认操作就给我们的设置(boder:1px solid color)带来了问题,这是你会发现,你的设置在其他浏览器中时有效的,但

css中文本框与按钮对不齐解决方案

我们先对对input标记设定样式,代码如下: html 代码 <form> <input type=”text” name=”text1” id=”text1” /> <input type=”submit” name=”button” id=”button” value=”提交” /> </form> CSS 代码 #text1{border:1px solid red;height:20px;} #button{background:#FFFFFF;co

UITextField常用属性归纳:文本框样式、文字样式、键盘样式、左右视图样式、清除按钮设置等,iosuitextfield

(1)可以根据需要设置文本框的样式(包括形状.边框颜色.背景等). (2)可以根据需要设置文字显示样式(包括输入密码时的密文显示.文字横向居中.纵向居中上下.输入的文字是否首席木大写.文字超过后是否缩小还是向右滚动等). (3)可以根据需要设置各种不同的键盘样式(只有数字.只有字母等等). (4)还有inputView可以弹出一个视图,用于取代弹出键盘,暂时不知道什么用处,但貌似可以用得地方很多啊. (5)还有return的样式设置,可以设置为Google也可以设置为Go和Search等更形象的

[转]UITextField常用属性归纳:文本框样式、文字样式、键盘样式、左右视图样式、清除按钮设置等

(1)可以根据需要设置文本框的样式(包括形状.边框颜色.背景等). (2)可以根据需要设置文字显示样式(包括输入密码时的密文显示.文字横向居中.纵向居中上下.输入的文字是否首席木大写.文字超过后是否缩小还是向右滚动等). (3)可以根据需要设置各种不同的键盘样式(只有数字.只有字母等等). (4)还有inputView可以弹出一个视图,用于取代弹出键盘,暂时不知道什么用处,但貌似可以用得地方很多啊. (5)还有return的样式设置,可以设置为Google也可以设置为Go和Search等更形象的