Select Inputs and Text Inputs in HTML - Best Way to Make Equal Width

Select inputs and text inputs in HTML - Best way to make equal width?

The solution is to specify box model for form elements, and browsers tend to agree most when you use border-box:

input, select, textarea {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

There's normalize.css project that aggregates such tricks.

How to get equal width of input and select fields

Updated answer

Here is how to change the box model used by the input/textarea/select elements so that they all behave the same way. You need to use the box-sizing property which is implemented with a prefix for each browser

-ms-box-sizing:content-box;
-moz-box-sizing:content-box;
-webkit-box-sizing:content-box; 
box-sizing:content-box;

This means that the 2px difference we mentioned earlier does not exist..

example at http://www.jsfiddle.net/gaby/WaxTS/5/

note: On IE it works from version 8 and upwards..

Original

if you reset their borders then the select element will always be 2 pixels less than the input elements..

example: http://www.jsfiddle.net/gaby/WaxTS/2/

How to make input and select to be same width in css

Demo Fiddle

You should ideally separate style from content, so in your CSS include:

input, select{
  width:100%;
  box-sizing:border-box;
}

nb. demo fiddle without box-sizing set

And you need to use box-sizing:border-box in order for sizing to take into account any browser specific or set margin/padding/borders. Here's a handy read on the subject.

Box-Sizing on MDN:

The box-sizing CSS property is used to alter the default CSS box model
used to calculate widths and heights of elements. It is possible to
use this property to emulate the behavior of browsers that do not
correctly support the CSS box model specification.

border-box

The width and height properties include the padding and border, but
not the margin. This is the box model used by Internet Explorer when
the document is in Quirks mode.

Why the input and the select do not get the same width?

This is because with an <input>, the border and padding is added on to the width (like with most other elements). With a <select>, the border and padding is included in the width, just like in the old IE quirks mode.

You can get round this by increasing the width to take account of this, if you know the width in pixels:

input  { width: 200px; padding: 10px; border-width:5px; }
select { width: 230px; padding: 10px; border-width:5px; }

Or (if you can rely on browser support) you can use the new CSS3 box-sizing property to make them behave consistently, and draw padding and border outside of the element width:

input, select {
  width: 200px;
  padding: 10px;
  border-width:5px;
  -webkit-box-sizing: content-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: content-box;    /* Firefox, other Gecko */
  box-sizing: content-box;         /* Opera/IE 8+ */
}

Alternatively, you can set box-sizing to border-box to make the inputs behave like the selects, with padding drawn inside the width of the box.

Tested in Chrome, IE8, FF

how to make input elements symmetric size (equal width) in a bootstrap row

Two obvious problems here:

1. You've linked to Bootstrap v3.3.5, but you're using Bootstrap v5 classes. In particular, the w-50 class wasn't available in v3.

2. You're specifying that the inputs should be 50% of the width of their parent. But the parents are different widths - one is seven columns (~58% of the container), and the other is five columns (~42% of the container).

If you're able to update to Bootstrap v5, then you can make your inputs the same size with:

/* create single select box */
function createSingleSelectBox(id, header_arr) {
  var selectBox = document.createElement("select");
  selectBox.setAttribute("id", id);
  selectBox.multiple = false;
  selectBox.className = "input-small w-50";

  for (var i = 0; i < header_arr.length; i++) {
    var op = new Option();
    op.value = header_arr[i];
    op.text = header_arr[i];
    selectBox.options.add(op);
  }
  return selectBox;
}

/* create input number box */
function createInputNumberBox(id, min, step, type, my_class, default_val) {
  var inputNumBox = document.createElement("input");
  inputNumBox.id = id;
  inputNumBox.className = my_class;
  inputNumBox.type = type;
  inputNumBox.step = step;
  inputNumBox.min = min;
  inputNumBox.value = default_val;
  return inputNumBox;
}

/* create heading with icon*/
function createHeadingWithIcon(
  head_type,
  head_text,
  icon_id,
  bottom_margin_px
) {
  var h = document.createElement(head_type);
  h.innerHTML =
    head_text +
    " " +
    "<i class='far fa-question-circle' " +
    icon_id +
    " style='color:grey'></i>";
  // <i class="far fa-question-circle" id="go_tooltip" style="color:grey"></i>
  h.style.marginBottom = bottom_margin_px;
  return h;
}

//#######################################################################################################################

var h4 = createHeadingWithIcon("h6", "R1_C1", "id='exclusive_tooltip'", "5px");
document.getElementById("id_R1_C1").appendChild(h4);
var exclusive_all = ["YES", "NO"];
var single_selectbox = createSingleSelectBox("R1_C1_select", exclusive_all);
document.getElementById("id_R1_C1").appendChild(single_selectbox);

var h4 = createHeadingWithIcon("h6", "R1_C2", "id='k_out_N_tooltip'", "5px");
document.getElementById("id_R1_C2").appendChild(h4);
var inputNumBox = createInputNumberBox(
  "id_R1_C2_input",
  1,
  1,
  "number",
  "input-xs w-50 h-50",
  "2"
);
document.getElementById("id_R1_C2").appendChild(inputNumBox);

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-lg-4">
  <div class="card pl-2 py-2">
    <div class="card-block">
      <div class="row pl-2">
        <div class="col-md-6" id="id_R1_C1"></div>
        <div class="col-md-6" id="id_R1_C2"></div>
      </div>
    </div>
  </div>
</div>

<input id="txt" type="text" onkeypress="this.style.width = ((this.value.length + 1) * 8) + 'px';">

input, select{
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}