如何在不改变样式的情况下更改输入边框颜色？ [英] How do I change an inputs border colour without changing the style?

问题描述

我试图做一些非常简单的事情;更改输入的边框颜色。在IE11和最新的稳定版Chrome中，改变颜色也会改变它的外观（3D / thicker）：

如果我尝试1px纯红色，那么边框看起来一样，但尺寸改变！

1. 为什么改变颜色看起来不仅仅是改变颜色


2. 我可以改变颜色而不改变其他任何东西（样式，厚度，间距，尺寸等）。
我已经尝试了搞乱带有边框宽度和其他属性，但没有一个会导致与默认值相同的大小/间距，只更改颜色：（b / b）
$ b

（请在发布之前尝试在JSFiddle中进行更改......很多人发布了不好的答案，然后将其删除！ http：/ /jsfiddle.net/S2TxT/4/ ）

 <输入类型=textvalue =默认/> 
< input type =textstyle =border：1px solid red/> 
  




解决方案

在IE11和Chrome中，





至于为什么 ...浏览器将成为浏览器？

 < input type =textvalue =默认/> 
< input type =textvalue =Defaultstyle =padding：2px 1px; border：1px solid red/> 
  

$ b $ p 编辑


经过进一步调查后，很明显可能会发生这种情况：
http://jsfiddle.net/S2TxT/18/




I'm trying to do something pretty simply; change the border colour of an input. In both IE11 and latest stable Chrome, changing the color also changes how it looks (appears 3D/thicker):

If I try "1px solid red" then the border looks the same, but the size changes!

1. Why does changing the colour seem to do more than just change the colour
2. How can I just change the colour without changing anything else (style, thickness, spacing, size, etc.)

I've tried messing with border-width and other properties, but none of them result in the exact same size/spacing as the default with only the colour changed :(

(Please try your changes in JSFiddle before posting... so many people are posting bad answers and then deleting them! http://jsfiddle.net/S2TxT/4/)

<input type="text" value="Default" />
<input type="text" style="border: 1px solid red" />

解决方案

In IE11 and Chrome, this got me matching boxes.

As for why... browsers will be browsers?

<input type="text" value="Default" />
<input type="text" value="Default" style="padding: 2px 1px; border: 1px solid red" />

http://jsfiddle.net/S2TxT/11/

EDIT

After further investigation, it becomes apparent why this might happen: http://jsfiddle.net/S2TxT/18/

这篇关于如何在不改变样式的情况下更改输入边框颜色？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！