'How to make some shape to the boxes?

I have this HTML code:

<html>

<body>

  <form style='display:flex; flex-direction: row; justify-content: center; align-items: center' action=''>
    <input type='text' id='frmDate' value=aaa name='frmDate' style='text-align:center; width: 150px;font-size: 10px; border-color: black; height: 45px; display: block;' readonly/>
    <label for='frmDate'>&nbsp;&nbsp;&nbsp;title</label> &nbsp;&nbsp;
    <select name='frmDate2' id='frmDate2' style='text-align:right; height: 45px; width: 150px;font-size: 10px; border-color: black; display: block;'>
      <option selected='selected'>a</option>
      <option>aa</option>
      <option>aa</option>
    </select>
    <label for='frmDate2'>&nbsp;&nbsp;title2</label>
    <br><br><br>
  </form>

</body>

</html>

The boxes are not in the same shape, How can I make them look like each other? I want the 2 boxes will look like the same shape

enter image description here

htmlcss


Solution 1:[1]

You need to set same border-width to both elements.

The input field is higher because of the standard behaviour of margin, if you set box-sizing: border-box to it, both elements will have same height.

select {
  border: 2px solid black
}

input,
select {
  box-sizing: border-box;
}
<form style='display:flex; flex-direction: row; justify-content: center; align-items: center' action=''>
  <input type='text' id='frmDate' value=aaa name='frmDate' style='text-align:center; width: 150px;font-size: 10px; border-color: black; height: 45px; display: block;' readonly/>
  <label for='frmDate'>&nbsp;&nbsp;&nbsp;title</label> &nbsp;&nbsp;
  <select name='frmDate2' id='frmDate2' style='text-align:right; height: 45px; width: 150px;font-size: 10px; border-color: black; display: block;'>
    <option selected='selected'>a</option>
    <option>aa</option>
    <option>aa</option>
  </select>
  <label for='frmDate2'>&nbsp;&nbsp;title2</label>
  <br><br><br>
</form>

Solution 2:[2]

The easiest means is to avoid using inline styles, switch to a stylesheet (or the <style> element) and then define their properties together; once that's done they appear almost identical (bearing in mind that you've chosen to align the text differently, center for the <input> and right for the <select>). The final part of ensuring they look the same is to define styles for the border, to override the default border-style of the <select>:

/* generic, minimal reset to ensure all elements have the same
   base styles to reduce cross-browser differences: */
*,
::before,
::after {
  box-sizing: border-box;
  font-size: 16px;
  margin: 0;
  padding: 0;
}

form {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0.5em;
  /* this is added simply to move the <form> away from
     the top/left edge to more clearly see the borders
     of the child-elements: */
  margin-block: 1em;
  margin-inline: auto;
  gap: 0.5em;
}

/* all common styles for the elements declared together: */
input,
select {
  width: 150px;
  height: 45px;
  /* once the border was styled, to override the default
     styling of the <select> element, they look alike: */
  border-color: black;
  border-style: solid;
}

/* to allow for the specific element styles, in your
   case the text-alignment: */
input {
  text-align: center;
}

select {
  text-align: right;
}
<form action=''>
  <input type='text' id='frmDate' value=aaa name='frmDate' readonly/>
  <label for='frmDate'>title</label>
  <select name='frmDate2' id='frmDate2'>
    <option selected='selected'>a</option>
    <option>aa</option>
    <option>aa</option>
  </select>
  <label for='frmDate2'>title2</label>
</form>

Solution 3:[3]

Your other attributes are good. For the border consistency, you can add border and border-radius to your styles

border-radius: 0.2rem; /*Round 4 border corners with 0.2rem*/
border: 1px solid black; /*Make your element borders consistent*/


<html>

  <body>

    <form style='display:flex; flex-direction: row; justify-content: center; align-items: center' action=''>
      <input type='text' id='frmDate' value=aaa name='frmDate' style='text-align:center; width: 150px;font-size: 10px; border-radius: 0.2rem; border: 1px solid black; height: 45px; display: block;' readonly />
      <label for='frmDate'>&nbsp;&nbsp;&nbsp;title</label> &nbsp;&nbsp;
      <select name='frmDate2' id='frmDate2' style='text-align:right; height: 45px; width: 150px;font-size: 10px; border-radius: 0.2rem; border: 1px solid black; display: block;'>
        <option selected='selected'>a</option>
        <option>aa</option>
        <option>aa</option>
      </select>
      <label for='frmDate2'>&nbsp;&nbsp;title2</label>
      <br><br><br>
    </form>

  </body>

</html>

To reduce style duplication as well as code readability improvement, you can add classes to your elements.

Furthermore, we should not use &nbsp; for spacing. I'd suggest that you should use padding or margin that will improve your code to be more effective

<html>

<head>
  <style>
    .form {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center
    }
    
    .input-field {
      width: 150px;
      font-size: 10px;
      border-radius: 0.2rem;
      border: 1px solid black;
      height: 45px;
      display: block;
    }
    
    .right-text-align {
       text-align: right;
    }
    
    .center-text-align {
       text-align: left;
    }
    
    .label {
      padding: 0.5rem;
    }
  </style>
</head>

<body>

  <form class="form" action=''>
    <input type='text' id='frmDate' value=aaa name='frmDate' class="input-field center-text-align" readonly />
    <label for='frmDate' class="label">title</label>
    <select name='frmDate2' id='frmDate2' class="input-field right-text-align">
      <option selected='selected'>a</option>
      <option>aa</option>
      <option>aa</option>
    </select>
    <label for='frmDate2' class="label">title2</label>
    <br><br><br>
  </form>

</body>

</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 cloned
Solution 2 David Thomas
Solution 3

Related Questions