How to center the content of month input field?












2















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










share|improve this question




















  • 1





    jsfiddle.net/8aqLzg4x works fine here? I just copy pasted your code.

    – Denisx
    Jan 3 at 14:46






  • 1





    It is working fine with center right? any screenshot for expected output.

    – Anji
    Jan 3 at 14:49













  • I'm using Opera and originally it's an electron app (same problem on both platforms). I have print screened what I see when I view the link you provided. I'm suspecting the problem might be related to me displaying the month input in Swedish? If you look closely at the picture it isn't centered.

    – Daniel Slätt
    Jan 3 at 14:50






  • 1





    @DanielSlätt, do you want to align input box text vertically center?

    – Anji
    Jan 3 at 14:52











  • That's what I want :) (P.S - just realized I forgot to specify that it's the text I'm having trouble with - sorry!)

    – Daniel Slätt
    Jan 3 at 14:52


















2















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










share|improve this question




















  • 1





    jsfiddle.net/8aqLzg4x works fine here? I just copy pasted your code.

    – Denisx
    Jan 3 at 14:46






  • 1





    It is working fine with center right? any screenshot for expected output.

    – Anji
    Jan 3 at 14:49













  • I'm using Opera and originally it's an electron app (same problem on both platforms). I have print screened what I see when I view the link you provided. I'm suspecting the problem might be related to me displaying the month input in Swedish? If you look closely at the picture it isn't centered.

    – Daniel Slätt
    Jan 3 at 14:50






  • 1





    @DanielSlätt, do you want to align input box text vertically center?

    – Anji
    Jan 3 at 14:52











  • That's what I want :) (P.S - just realized I forgot to specify that it's the text I'm having trouble with - sorry!)

    – Daniel Slätt
    Jan 3 at 14:52
















2












2








2


1






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










share|improve this question
















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






 <!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>





 <!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>






html css






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Jan 3 at 14:53







Daniel Slätt

















asked Jan 3 at 14:44









Daniel SlättDaniel Slätt

3461313




3461313








  • 1





    jsfiddle.net/8aqLzg4x works fine here? I just copy pasted your code.

    – Denisx
    Jan 3 at 14:46






  • 1





    It is working fine with center right? any screenshot for expected output.

    – Anji
    Jan 3 at 14:49













  • I'm using Opera and originally it's an electron app (same problem on both platforms). I have print screened what I see when I view the link you provided. I'm suspecting the problem might be related to me displaying the month input in Swedish? If you look closely at the picture it isn't centered.

    – Daniel Slätt
    Jan 3 at 14:50






  • 1





    @DanielSlätt, do you want to align input box text vertically center?

    – Anji
    Jan 3 at 14:52











  • That's what I want :) (P.S - just realized I forgot to specify that it's the text I'm having trouble with - sorry!)

    – Daniel Slätt
    Jan 3 at 14:52
















  • 1





    jsfiddle.net/8aqLzg4x works fine here? I just copy pasted your code.

    – Denisx
    Jan 3 at 14:46






  • 1





    It is working fine with center right? any screenshot for expected output.

    – Anji
    Jan 3 at 14:49













  • I'm using Opera and originally it's an electron app (same problem on both platforms). I have print screened what I see when I view the link you provided. I'm suspecting the problem might be related to me displaying the month input in Swedish? If you look closely at the picture it isn't centered.

    – Daniel Slätt
    Jan 3 at 14:50






  • 1





    @DanielSlätt, do you want to align input box text vertically center?

    – Anji
    Jan 3 at 14:52











  • That's what I want :) (P.S - just realized I forgot to specify that it's the text I'm having trouble with - sorry!)

    – Daniel Slätt
    Jan 3 at 14:52










1




1





jsfiddle.net/8aqLzg4x works fine here? I just copy pasted your code.

– Denisx
Jan 3 at 14:46





jsfiddle.net/8aqLzg4x works fine here? I just copy pasted your code.

– Denisx
Jan 3 at 14:46




1




1





It is working fine with center right? any screenshot for expected output.

– Anji
Jan 3 at 14:49







It is working fine with center right? any screenshot for expected output.

– Anji
Jan 3 at 14:49















I'm using Opera and originally it's an electron app (same problem on both platforms). I have print screened what I see when I view the link you provided. I'm suspecting the problem might be related to me displaying the month input in Swedish? If you look closely at the picture it isn't centered.

– Daniel Slätt
Jan 3 at 14:50





I'm using Opera and originally it's an electron app (same problem on both platforms). I have print screened what I see when I view the link you provided. I'm suspecting the problem might be related to me displaying the month input in Swedish? If you look closely at the picture it isn't centered.

– Daniel Slätt
Jan 3 at 14:50




1




1





@DanielSlätt, do you want to align input box text vertically center?

– Anji
Jan 3 at 14:52





@DanielSlätt, do you want to align input box text vertically center?

– Anji
Jan 3 at 14:52













That's what I want :) (P.S - just realized I forgot to specify that it's the text I'm having trouble with - sorry!)

– Daniel Slätt
Jan 3 at 14:52







That's what I want :) (P.S - just realized I forgot to specify that it's the text I'm having trouble with - sorry!)

– Daniel Slätt
Jan 3 at 14:52














3 Answers
3






active

oldest

votes


















3














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;
}





share|improve this answer


























  • Ah, wonderful!! Thank you :)

    – Daniel Slätt
    Jan 3 at 15:00






  • 1





    @DanielSlätt See the edit if you would like to use this only on disabled inputs

    – Daut
    Jan 3 at 15:17



















1














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>








share|improve this answer































    1














    @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.






    share|improve this answer
























    • If I were to have to concern about browsers then yes, I probably wouldn't keep it this way. But it's for an electron app so it's fine :)

      – Daniel Slätt
      Jan 3 at 15:03











    • Oh, yeah. Missed that.

      – Aditya Gupta
      Jan 3 at 15:03











    • The reason I have a disabled month selector is I have programmed two buttons to slide it right or left

      – Daniel Slätt
      Jan 3 at 15:03











    • Haha, that's no worries, I never clarified :) Your input could still be relevant for other people with similar issues.

      – Daniel Slätt
      Jan 3 at 15:04













    • Cool. I deleted my comment after getting it. Makes sense now.

      – Aditya Gupta
      Jan 3 at 15:05














    Your Answer






    StackExchange.ifUsing("editor", function () {
    StackExchange.using("externalEditor", function () {
    StackExchange.using("snippets", function () {
    StackExchange.snippets.init();
    });
    });
    }, "code-snippets");

    StackExchange.ready(function() {
    var channelOptions = {
    tags: "".split(" "),
    id: "1"
    };
    initTagRenderer("".split(" "), "".split(" "), channelOptions);

    StackExchange.using("externalEditor", function() {
    // Have to fire editor after snippets, if snippets enabled
    if (StackExchange.settings.snippets.snippetsEnabled) {
    StackExchange.using("snippets", function() {
    createEditor();
    });
    }
    else {
    createEditor();
    }
    });

    function createEditor() {
    StackExchange.prepareEditor({
    heartbeatType: 'answer',
    autoActivateHeartbeat: false,
    convertImagesToLinks: true,
    noModals: true,
    showLowRepImageUploadWarning: true,
    reputationToPostImages: 10,
    bindNavPrevention: true,
    postfix: "",
    imageUploader: {
    brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
    contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
    allowUrls: true
    },
    onDemand: true,
    discardSelector: ".discard-answer"
    ,immediatelyShowMarkdownHelp:true
    });


    }
    });














    draft saved

    draft discarded


















    StackExchange.ready(
    function () {
    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54024542%2fhow-to-center-the-content-of-month-input-field%23new-answer', 'question_page');
    }
    );

    Post as a guest















    Required, but never shown

























    3 Answers
    3






    active

    oldest

    votes








    3 Answers
    3






    active

    oldest

    votes









    active

    oldest

    votes






    active

    oldest

    votes









    3














    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;
    }





    share|improve this answer


























    • Ah, wonderful!! Thank you :)

      – Daniel Slätt
      Jan 3 at 15:00






    • 1





      @DanielSlätt See the edit if you would like to use this only on disabled inputs

      – Daut
      Jan 3 at 15:17
















    3














    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;
    }





    share|improve this answer


























    • Ah, wonderful!! Thank you :)

      – Daniel Slätt
      Jan 3 at 15:00






    • 1





      @DanielSlätt See the edit if you would like to use this only on disabled inputs

      – Daut
      Jan 3 at 15:17














    3












    3








    3







    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;
    }





    share|improve this answer















    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;
    }






    share|improve this answer














    share|improve this answer



    share|improve this answer








    edited Jan 3 at 15:16

























    answered Jan 3 at 14:58









    DautDaut

    1,1481924




    1,1481924













    • Ah, wonderful!! Thank you :)

      – Daniel Slätt
      Jan 3 at 15:00






    • 1





      @DanielSlätt See the edit if you would like to use this only on disabled inputs

      – Daut
      Jan 3 at 15:17



















    • Ah, wonderful!! Thank you :)

      – Daniel Slätt
      Jan 3 at 15:00






    • 1





      @DanielSlätt See the edit if you would like to use this only on disabled inputs

      – Daut
      Jan 3 at 15:17

















    Ah, wonderful!! Thank you :)

    – Daniel Slätt
    Jan 3 at 15:00





    Ah, wonderful!! Thank you :)

    – Daniel Slätt
    Jan 3 at 15:00




    1




    1





    @DanielSlätt See the edit if you would like to use this only on disabled inputs

    – Daut
    Jan 3 at 15:17





    @DanielSlätt See the edit if you would like to use this only on disabled inputs

    – Daut
    Jan 3 at 15:17













    1














    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>








    share|improve this answer




























      1














      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>








      share|improve this answer


























        1












        1








        1







        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>








        share|improve this answer













        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>








            <!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>





            <!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>






        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered Jan 3 at 15:00









        aMJayaMJay

        1,58041323




        1,58041323























            1














            @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.






            share|improve this answer
























            • If I were to have to concern about browsers then yes, I probably wouldn't keep it this way. But it's for an electron app so it's fine :)

              – Daniel Slätt
              Jan 3 at 15:03











            • Oh, yeah. Missed that.

              – Aditya Gupta
              Jan 3 at 15:03











            • The reason I have a disabled month selector is I have programmed two buttons to slide it right or left

              – Daniel Slätt
              Jan 3 at 15:03











            • Haha, that's no worries, I never clarified :) Your input could still be relevant for other people with similar issues.

              – Daniel Slätt
              Jan 3 at 15:04













            • Cool. I deleted my comment after getting it. Makes sense now.

              – Aditya Gupta
              Jan 3 at 15:05


















            1














            @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.






            share|improve this answer
























            • If I were to have to concern about browsers then yes, I probably wouldn't keep it this way. But it's for an electron app so it's fine :)

              – Daniel Slätt
              Jan 3 at 15:03











            • Oh, yeah. Missed that.

              – Aditya Gupta
              Jan 3 at 15:03











            • The reason I have a disabled month selector is I have programmed two buttons to slide it right or left

              – Daniel Slätt
              Jan 3 at 15:03











            • Haha, that's no worries, I never clarified :) Your input could still be relevant for other people with similar issues.

              – Daniel Slätt
              Jan 3 at 15:04













            • Cool. I deleted my comment after getting it. Makes sense now.

              – Aditya Gupta
              Jan 3 at 15:05
















            1












            1








            1







            @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.






            share|improve this answer













            @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.







            share|improve this answer












            share|improve this answer



            share|improve this answer










            answered Jan 3 at 15:02









            Aditya GuptaAditya Gupta

            8811922




            8811922













            • If I were to have to concern about browsers then yes, I probably wouldn't keep it this way. But it's for an electron app so it's fine :)

              – Daniel Slätt
              Jan 3 at 15:03











            • Oh, yeah. Missed that.

              – Aditya Gupta
              Jan 3 at 15:03











            • The reason I have a disabled month selector is I have programmed two buttons to slide it right or left

              – Daniel Slätt
              Jan 3 at 15:03











            • Haha, that's no worries, I never clarified :) Your input could still be relevant for other people with similar issues.

              – Daniel Slätt
              Jan 3 at 15:04













            • Cool. I deleted my comment after getting it. Makes sense now.

              – Aditya Gupta
              Jan 3 at 15:05





















            • If I were to have to concern about browsers then yes, I probably wouldn't keep it this way. But it's for an electron app so it's fine :)

              – Daniel Slätt
              Jan 3 at 15:03











            • Oh, yeah. Missed that.

              – Aditya Gupta
              Jan 3 at 15:03











            • The reason I have a disabled month selector is I have programmed two buttons to slide it right or left

              – Daniel Slätt
              Jan 3 at 15:03











            • Haha, that's no worries, I never clarified :) Your input could still be relevant for other people with similar issues.

              – Daniel Slätt
              Jan 3 at 15:04













            • Cool. I deleted my comment after getting it. Makes sense now.

              – Aditya Gupta
              Jan 3 at 15:05



















            If I were to have to concern about browsers then yes, I probably wouldn't keep it this way. But it's for an electron app so it's fine :)

            – Daniel Slätt
            Jan 3 at 15:03





            If I were to have to concern about browsers then yes, I probably wouldn't keep it this way. But it's for an electron app so it's fine :)

            – Daniel Slätt
            Jan 3 at 15:03













            Oh, yeah. Missed that.

            – Aditya Gupta
            Jan 3 at 15:03





            Oh, yeah. Missed that.

            – Aditya Gupta
            Jan 3 at 15:03













            The reason I have a disabled month selector is I have programmed two buttons to slide it right or left

            – Daniel Slätt
            Jan 3 at 15:03





            The reason I have a disabled month selector is I have programmed two buttons to slide it right or left

            – Daniel Slätt
            Jan 3 at 15:03













            Haha, that's no worries, I never clarified :) Your input could still be relevant for other people with similar issues.

            – Daniel Slätt
            Jan 3 at 15:04







            Haha, that's no worries, I never clarified :) Your input could still be relevant for other people with similar issues.

            – Daniel Slätt
            Jan 3 at 15:04















            Cool. I deleted my comment after getting it. Makes sense now.

            – Aditya Gupta
            Jan 3 at 15:05







            Cool. I deleted my comment after getting it. Makes sense now.

            – Aditya Gupta
            Jan 3 at 15:05




















            draft saved

            draft discarded




















































            Thanks for contributing an answer to Stack Overflow!


            • Please be sure to answer the question. Provide details and share your research!

            But avoid



            • Asking for help, clarification, or responding to other answers.

            • Making statements based on opinion; back them up with references or personal experience.


            To learn more, see our tips on writing great answers.




            draft saved


            draft discarded














            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54024542%2fhow-to-center-the-content-of-month-input-field%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown





















































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown

































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown







            Popular posts from this blog

            Monofisismo

            Angular Downloading a file using contenturl with Basic Authentication

            Olmecas