在chrome中输入字段宽度和填充 [英] Input field width and padding in chrome

问题描述

我遇到了一个问题，我的输入元素的宽度因浏览器而异。 Chrome给出了一个不正确的宽度，其中with应该是宽度+填充现在是宽度，并且总填充是最小宽度。

HTML

 < input type =searchname =keywordsid =ctrl_keywords_2class =textvalue => 
  

CSS

 输入{
 width：76px; 
 padding-right：52px; 
 padding-left：24px; 
} 
  

我已经放置了这里有个例子来测试它。

到这里解释的输入类型搜索， http://css-tricks.com/webkit -html5-search-inputs /

  input [type = search] {
 padding：30px; / *由填充覆盖：1px; * / 
 font-family：格鲁吉亚; / *由字体覆盖：-webkit-small-control; * / 
 border：5px纯黑色; / *由边框覆盖：2px插图; * / 
背景：红色; / *由背景颜色覆盖：白色; * / 
 line-height：3; / *无关，我猜* / 
} 
  

I'm having an issue where the width of my input element differs depending on the browser. Chrome gives an incorrect width where the with should be width+padding it is now width and the total padding is the minimum width.

HTML

<input type="search" name="keywords" id="ctrl_keywords_2" class="text" value="">​

CSS

input {
width: 76px;
padding-right: 52px;
padding-left: 24px;
}​

I've placed an example here to test it.

解决方案

There are limitations to the input type search as explained here, http://css-tricks.com/webkit-html5-search-inputs/

input[type=search] {    
    padding: 30px;            /* Overridden by padding: 1px; */
    font-family: Georgia;     /* Overridden by font: -webkit-small-control; */
    border: 5px solid black;  /* Overridden by border: 2px inset; */
    background: red;          /* Overridden by background-color: white; */
    line-height: 3;           /* Irrelevant, I guess */
}

这篇关于在chrome中输入字段宽度和填充的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！