我试图将输入字段的值(而不是占位符)居中。不知何故iOS没有“识别”居中,不过firefox,safari和chrome都可以。
HTML
<input type="time" value="12:00">
CSS
input {
background-color: lightyellow;
border: none;
outline: none;
text-align: center;
width: 200px;
padding: 5%;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
-webkit-background-clip: border-box;
-webkit-background-origin: padding-box;
-webkit-background-size: auto;
-webkit-box-shadow: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
结果应该是一个黄色方框,其中包含时间12:00,在iOS设备上它不起作用。
这是一个jsfiddle:http://jsfiddle.net/y9TPM/4/
输入元素很神秘。某些浏览器为显示属性设置了inline-block
值,而某些浏览器具有inline
值。
内联元素不能具有宽度,因此无法将文本与右侧或中心对齐。
因此,在您的情况下,浏览器默认为显示属性的inline-block
值将具有对齐效果。但它不会是哪个浏览器默认为inline
值。
因此,明确地设置显示属性将使您在场景后面得到缓解。只需将display属性设置为inline-block
或block
即可获得宽度或对齐方式。
仅供参考,大多数浏览器应将input元素的display属性呈现给inline-block
。这是一个快速参考:default css for html elemnts。
display: block;
做了魔术,无论出于什么原因它需要iOS而不是桌面..如果有人有感叹我很高兴听到它