CSS formatting date JSF component

Question

I do not like the current look of a JSF inputDate component. I want the select menu to have the same height as an input. I want to make the input texts shorter except the year input.

This is my current progress:

And generated source code snippet:

<style type="text/css">
        #config\:inptext_date_to > select {
            vertical-align: top;
            height: 24px;
            margin-left: 3px;
            margin-right: 3px;
        }
        #config\:inptext_date_from.year > input {
            width: 5ch;
        }
        #config\:inptext_date_from > input {
            width: 3ch;
        }
        #config\:inptext_date_to.year > input {
            width: 5ch;
        }
        #config\:inptext_date_to > input {
            width: 3ch;
        }
        #config\:inptext_date_from > select {
            vertical-align: top;
            height: 24px;
            margin-left: 3px;
            margin-right: 3px;
        }
</style>

<span id="config:inptext_date_from">
  <input id="config:inptext_date_from.day" name="config:inptext_date_from.day" size="2" maxlength="2" value="29" />
  <select id="config:inptext_date_from.month" name="config:inptext_date_from.month" size="1">
    <option value="-1">června</option>		
  <input id="config:inptext_date_from.year" name="config:inptext_date_from.year" size="4" maxlength="4" value="2018" /> 
  <input id="config:inptext_date_from.hours" name="config:inptext_date_from.hours" size="2" maxlength="2" value="00" />:
  <input id="config:inptext_date_from.minutes" name="config:inptext_date_from.minutes" size="2" maxlength="2" value="00" />            
</span>

My current problems:

1. I do not like duplicating CSS definitions for both ids. Comma separation did not work.
2. I cannot create a rule just for config:inptext_date_from.year id.

July 9th update

The last CSS version with incorporated some info by Chase. Box-sizing did not had any effect. I switched to ex from ch unit because I need to support a legacy IE (the compatibility mode). It looks OK on the current Chrome but not with the legacy IE. Developer tools show that the style is not recognized.

        #config\:inptext_date_to > select {
            vertical-align: top;
            min-height: 24px;
            margin-left: 3px;
            margin-right: 3px;
        }
        #config\:inptext_date_from > input, #config\:inptext_date_to > input {
            text-align: center;
            width: 3ex;
        }
        #config\:inptext_date_from > input:nth-child(3), #config\:inptext_date_to > input:nth-child(3) {
            text-align: center;
            width: 5ex;
        }
        #config\:inptext_date_from > select {
            vertical-align: top;
            min-height: 24px;
            margin-left: 3px;
            margin-right: 3px;
        }

Answer 1

I want the select menu to have the same height as an input

When it comes to making the <input> and the <select> elements the same height, you can include the box-sizing: border-box property on both of them and set the height of your <select> to whatever you want. This post details this process and includes a separate jsFiddle along with it.

I want to make the input texts shorter except the year input.

You have a fine solution implemented for this from what I can tell. For anyone else wondering just how ch lengths work, here is a good CSS Tricks article documenting the differences between the various lengths.

I do not like duplicating CSS definitions for both ids. Comma separation did not work.

The main issue I saw with your CSS selectors was that you were trying to include a period without escaping it first. You had escaped (\) the : in your IDs, but not the .. This was basically telling your selector that you were looking for an element with an ID of config:inptext_date_from that also had a class of year. I would personally recommend using classes instead of IDs in this case to select which elements you want as well as replace the period in the name with an underscore. I left the names in there just in case you were making some sort of server request for this information. This will make it so you can use the same CSS selectors for both your to and your from forms.

I cannot create a rule just for config:inptext_date_from.year id.

I'm not 100% sure what you meant by this, but my best guess is that you were having the same issue that you were in my previous point with including the . in your selector. To remedy this issue, I included:

.date-config > input.year {
    width: 5ch;
}

Overall, this is what we ended up with:

.date-config {
  margin-bottom: 10px;
  display: block;
}

.date-config > input,
.date-config > select {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  vertical-align: top;
}

.date-config > input {
  width: 3ch;
}

.date-config > input.year {
  width: 5ch;
}

.date-config > select {
  margin-right: 3px;
  height: 21px;
  line-height: 21px;
}

<span id="config:inptext_date_from" class="date-config">
  <input name="config:inptext_date_from_day"  class="day" size="2" maxlength="2" value="29" />
  <select name="config:inptext_date_from_month" class="month" size="1">
    <option value="1" selected>January</option>      
    <option value="2" selected>Febuary</option>
  <input name="config:inptext_date_from_year" class="year" size="4" maxlength="4" value="2018" /> 
  <input name="config:inptext_date_from_hours" class="hours" size="2" maxlength="2" value="00" />:
  <input name="config:inptext_date_from_minutes" class="minutes" size="2" maxlength="2" value="00" />            
</span>

<span id="config:inptext_date_to" class="date-config">
  <input name="config:inptext_date_to_day"  class="day" size="2" maxlength="2" value="29" />
  <select name="config:inptext_date_to_month" class="month" size="1">
    <option value="1" selected>January</option>      
    <option value="2" selected>Febuary</option>
  <input name="config:inptext_date_to_year" class="year" size="4" maxlength="4" value="2018" /> 
  <input name="config:inptext_date_to_hours" class="hours" size="2" maxlength="2" value="00" />:
  <input name="config:inptext_date_to_minutes" class="minutes" size="2" maxlength="2" value="00" />            
</span>