文本缩进与文本输入不一致,并在不同设备上选择列表

时间:2014-02-24 11:35:29

标签: forms styling

我有一个简单的文本输入和一个选择列表。我用类似的方式设置它们,我需要它们具有相同的文本缩进。

如果我将文本缩进设置为px值,那么它们在我的iPhone上缩进相同的数量,但在Chrome中它们是不同的。有没有办法标准化这个跨设备和浏览器?

http://codepen.io/anon/pen/pnvqJ

<input placeholder="Last name" type="text" maxlength="25" name="last_name"  size="60" value="" >
<select name="title">
<option>1</option><option>2</option><option>3</option><option>4</option><option>5</option></select>

*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
 }

body {
  padding: 0;
  margin: 0;
}

input, select {
  display: block;
  border: none;
  text-indent: 10px;
  width: 100%;
  background: grey;
}

enter image description here

3 个答案:

答案 0 :(得分:1)

只需单独格式化,使用一种样式选择其他输入

    *, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
 }

body {
  padding: 0;
  margin: 0;
}

select {
  display: block;
  border: none;
  text-indent: 10px;
  width: 100%;
  background: grey;
}
input{
  display: block;
  border: none;
  width: 100%;
  background: grey;
  text-indent:15px;
}

如果对你来说很重要,那么两个人都会有一个类别(里面会有很多样式,你可以做到这一点

*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
 }

body {
  padding: 0;
  margin: 0;
}

input, select {
  display: block;
  border: none;
  text-indent: 10px;
  width: 100%;
  background: grey;
}
input{
  text-indent:15px !IMPORTANT;
}

在这个例子中基本上做同样的事情。 !IMPORTANT表示即使在其他样式标记中它已经具有其他值,也会使用它。两种方式的结果是相同的(enter image description here

答案 1 :(得分:0)

我不擅长设计,仍然应用了一些逻辑, 再添加一个类,

select {
  text-indent: 5px !important;
}

<强> Example

我认为select元素默认需要更多额外缩进,这就是套管问题,如果您只针对特定浏览器遇到此问题,请尝试仅针对这些特定浏览器应用此类。

答案 2 :(得分:0)

似乎select具有&nbsp;宽度的固有最小缩进。您是否考虑过计算the pixel width of NBSP并将其设置为JS中text-indent的{​​{1}}?