不同浏览器兼容问题—— input 添加required属性 firefox下输入框为红色 +禁止中文输入

1、如果一个表单控件具有required属性，在chrome浏览器下显示正常，在Firefox浏览器中会加上一圈粉红色的边框，无法实现各个浏览器统一，尤其是当你将这个控件设置了不显示某些边框线的时候，要去除Firefox给有required属性的表单控件添加的边框，只需要添加一句CSS代码即可。

添加下列代码以后，具有required属性的input和textarea将不再自动添加粉红色边框（其实是盒子阴影）。

1.         <style>
   
2.                 input[required]:invalid, input:focus:invalid, textarea[required]:invalid, textarea:focus:invalid{box-shadow: none;}
   
3.         </style>

复制代码

或者写成下面这种形式

1.         <style>
   
2.                 input:required:invalid, input:focus:invalid, textarea:required:invalid, textarea:focus:invalid{box-shadow: none;}
   
3.         </style>

复制代码

为了兼容老版本的Firefox，还可以将-moz-box-shadow:none也添加上去。

附图不同浏览器显示效果：chrome

firefox：

2、如果对表单控件添加了css代码：ime-mode:disabled;  在firefox浏览器下，会限制输入框的中文输入，解决方法去掉此段css代码即可。