How to make some shape to the boxes?-CodePudding

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

CodePudding user response：

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>

CodePudding user response：

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>

CodePudding user response：

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   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  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>
    <br><br><br>
  </form>

</body>

</html>