How to center the content of month input field?

问题: 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.

enter image description here


回答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.

enter image description here

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

enter image description here

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.

  • 发表于 2019-01-07 00:39
  • 阅读 ( 239 )
  • 分类:网络文章

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除