Set the Width 100% On Input Tag

This time I will share a simple basic knowledge of CSS, but sometimes less widely known that we are difficult to set. It is about setting a width of 100% at an input tag, both for input search, email, and more. If we do not know the basic settings of a width of 100% on the input tag, we will have difficulty adjusts the width of a width of 100% as normally input will be out beyond its mother like in the picture above for a box search box first. That is because the input is using padding and border thereby increasing the width of the input box.

Author: Adhy Suriady

 Now that the width of the input has a width of 100% to its parent despite having border and padding as the second box in the picture above, we will use css box-sizing on the input. Example input engines that do not use box-sizing as below with css style and html as below.CSS

.search-box{
    display:block;
    border:1px solid #ddd;
    padding:20px;
}
.search-box input{
    width:100%;
    padding: 8px 12px;
    border:5px solid #ddd;
}
.search-box input:focus{
    border:5px solid #e8554e;
    outline:none
}

HTML

<form class="search-box">
    <input type="text" name="s" placeholder="Search here..."/>
    </form>

The result

To improve the appearance of the search box at the top, we tiggal add css below on inputs

    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;

CSS so that its become like below

.search-box input{
    width:100%;
    padding: 8px 12px;
    border:5px solid #ddd;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

And the results will be as below.

So easy is not it? Hopefully this brief posting lightweight and useful for you that will allow you to enhance the appearance of your blog.