问题:
I'm having trouble centering the text inside a HTML month-input field. Here's a simplified version of my HTML/CSS to demonstrate the issue:
If you run it, you'll see that...
可以将文章内容翻译成中文,广告屏蔽插件会导致该功能失效:
问题:
I'm having trouble centering the text inside a HTML month-input field. Here's a simplified version of my HTML/CSS to demonstrate the issue:
If you run it, you'll see that it is not centered - and if you try "text-align: right", it doesn't move all the way right either. It does move with both alternatives, which is strange.
Any idea why this happens?
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
body {
font-family: Helvetica;
font-size: 14px;
position: relative;
text-align: center;
}
.monthSelector{
display: inline-block;
text-align: center;
width: 250px;
}
</style>
</head>
<body>
<input disabled type="month" class="monthSelector" min="2017-01" max="2099-12" value="2018-01">
</body>
</html>
This is how it looks to me: As you can see the text is not centered inside the input box.
回答1:
This doesn't work as expected because of the way input type="month"
is rendered.
If you remove the disabled attribute you will see that (depending on the browser) you have some arrows and carets on the right. Taking them into account your text is in dead center.
You need to add this CSS
input[type=month]::-webkit-calendar-picker-indicator,
input[type=month]::-webkit-inner-spin-button {
display: none;
-webkit-appearance: none;
}
et voila
EDIT:
You can use :disabled
CSS selector so it doesn't affect your other inputs
input[type=date]:disabled::-webkit-calendar-picker-indicator,
input[type=date]:disabled::-webkit-inner-spin-button {
-webkit-appearance: none;
display: none;
}
回答2:
It is caused by default input controls being present (but invisible due to the input being disabled) when you give it month
type. The inputs text is centered relatively to the inputs width minus the width of the controls. One way around it is giving them a manually selected margin
to visually center the text.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
body {
font-family: Helvetica;
font-size: 14px;
position: relative;
text-align: center;
}
.monthSelector{
display: inline-block;
text-align: center;
width: 250px;
box-sizing:border-box;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
/* display: none; <- Crashes Chrome on hover */
-webkit-appearance: none;
margin: -15px; /* <-- Apparently some margin are still there even though it's hidden */
}
</style>
</head>
<body>
<input disabled type="month" class="monthSelector" min="2017-01" max="2099-12" value="2018-01">
</body>
</html>
回答3:
@Daut has given a good explanation about the rendering of hidden elements in the month
input.
You could go with the solution but it adds another challenge. Now, you are forced to make sure that the CSS has enough properties to render correctly in all browsers. Then you usually go for polyfills or you could just mark the input type as text
.