bootstrap-使列的高度等于宽度

Question

I have a input box which takes up 6 grid units. In height, it takes up 21.981px as in figure 1

I want to be able to have it be a square like in figure 2. How can achieve this

 <form class ="form-inline">
                <div class="row">
                 <div class="form-group col-xs-6">
                        <input id="p1a" type='text'
                               style='border: solid black 1px;'
                               onfocus='this.blur()'
                                readonly='true'
                                size='1'
                               value='&#x2753;' onclick='tristate_Marks(this)' />
                    </div></div>

Answer 1

You can use CSS for this:

 body { width: 200px; height: 200px; background-color: red; } .square { width: 100%; padding: calc(50% - 21px) 0; line-height: 21px; } 

 <input type="text" class="square" value="test" /> 

Answer 2

Although Thomas answer is correct and worked, i changed my approach to use js

window.onload  = function () {

    var width = $("#p1a").width();
    console.log(width)
    $("#p1a").height(width);
}

This does not resize the box on resize,but i do not need this functionality