How to make a form input width to responsive?

Question

Hello I have searchbox html. see screenshot http://s16.postimg.org/utmcaczmd/Untitled.jpg but when it is on the bigger screen PC, the focus width will still the same width and searchbox will look bigger because I make the div id = rightside's width in percent unit. so in the bigger screen the focus look too small width.

Question : How could I do to make the width of input form stretch too.

 #content
{
    float:left;
    margin-top:2vh;
    padding:0px;
    width:100%;
    display:flex;
    flex-direction:row;
    word-break: break-all;
}
#right-side
{
    float:left;
    margin-left:2vh;
    width:30%;
    min-height: 65vh;
    border: solid 2px #E0E0E0;
    background:white;
}

#left-side
{
    float:left;
    width:70%;
    min-height: 65vh;
    border: solid 2px #E0E0E0;
    background:white;
}
.searchbox
    {
        background: #80bfff;
        margin: 10px;
        margin-top:20px;
        padding: 5px;
        border-radius: 5px;
    }
   .search-bar 
        {
            height: 29px;
            background-color: #e1e1e1;
            -moz-border-radius: 100px;
            -webkit-border-radius: 100px;
            border-radius: 100px;
            margin-left:20px;
            margin-right:20px;
            margin-bottom:10px;

            position:relative;  
        }
        .search-bar .searchbutton 
        {
            position:absolute;
            top:23%;
            right:5px;
        }
        .sfield 
        {
            float: left;
            margin: 5px 0 0 8px;
            font: 8pt Verdana;
            color: #888;
            height: 20px;
            line-height: 18px;
            padding: 0;
            background: transparent;
            border: 0;
            max-width: 100%;
        }

              <div id="right-side">
                   <div class="searchbox">
                        <?php echo form_open('shopping/search');?>
                            <h4 style="text-align:center;"> ค้นหาสินค้า </h4>
                                <div class="search-bar">
                                    <input type="text" size="20" class="sfield" name="searchterm" value="" placeholder="Search...">
                                    <input type="image" class="searchbutton" name="search" src="http://www.spheretekk.com/bc/images/search-icon.gif" alt="Search">
                                </div>
                        <?php echo form_close();?>
                    </div>
               </div>

Answer 1

you need to address some absolute value instead of a percent

check below demo, change the width of #right-side and see how the input field follows

 #content
{
    float:left;
    margin-top:2vh;
    padding:0px;
    width:100%;
    display:flex;
    flex-direction:row;
    word-break: break-all;
}
#right-side
{
    float:left;
    margin-left:2vh;
    width:30%;
    min-height: 65vh;
    border: solid 2px #E0E0E0;
    background:white;
}

#left-side
{
    float:left;
    width:70%;
    min-height: 65vh;
    border: solid 2px #E0E0E0;
    background:white;
}
.searchbox
    {
        background: #80bfff;
        margin: 10px;
        margin-top:20px;
        padding: 5px;
        border-radius: 5px;
    }
   .search-bar 
        {
            height: 29px;
            background-color: #e1e1e1;
            -moz-border-radius: 100px;
            -webkit-border-radius: 100px;
            border-radius: 100px;
            margin-left:20px;
            margin-right:20px;
            margin-bottom:10px;
            position:relative;  
            padding-right: 34px; /* <- absolute space */
        }
        .search-bar .searchbutton 
        {
            position:absolute;
            top:23%;
            right:5px;
        }
        .sfield 
        {
            float: left;
            margin: 5px 0 0 8px;
            font: 8pt Verdana;
            color: #888;
            height: 20px;
            line-height: 18px;
            padding: 0;
            background: transparent;
            border: 0;
            width: 100%; /* <- full width */
            background-color: red; /* <- to better appreciate where is the input field (and its bounds) */
        }

              <div id="right-side">
                   <div class="searchbox">
                        <?php echo form_open('shopping/search');?>
                            <h4 style="text-align:center;"> ค้นหาสินค้า </h4>
                                <div class="search-bar">
                                    <input type="text" size="20" class="sfield" name="searchterm" value="" placeholder="Search...">
                                    <input type="image" class="searchbutton" name="search" src="http://www.spheretekk.com/bc/images/search-icon.gif" alt="Search">
                                </div>
                        <?php echo form_close();?>
                    </div>
               </div>

Answer 2

Here we go:

1. For .search-bar input[type="text"] Give the input field a width of 100%; and box-sizing: border-box;
2. In .search-bar you need to set the max-width property to 100%. => max-width: 100%;
3. Remove the margin-left and margin-right from .search-bar and set a padding on the parent element.

Here is the example:

#content
{
    float:left;
    margin-top:2vh;
    padding:0px;
    width:100%;
    display:flex;
    flex-direction:row;
    word-break: break-all;
}
#right-side
{
    float:left;
    margin-left:2vh;
    width:90%;
    min-height: 65vh;
    border: solid 2px #E0E0E0;
    background:white;
}

#left-side
{
    float:left;
    width:70%;
    min-height: 65vh;
    border: solid 2px #E0E0E0;
    background:white;
}
.searchbox
    {
        background: #80bfff;
        margin: 10px;
        margin-top:20px;
        padding: 10px;
        border-radius: 5px;
    }
   .search-bar 
        {
            height: 29px;
            background-color: #e1e1e1;
            -moz-border-radius: 100px;
            -webkit-border-radius: 100px;
            border-radius: 100px;
            margin-bottom:10px;
          max-width: 100%;
            position:relative;  
        }
        .search-bar .searchbutton 
        {
            position:absolute;
            top:23%;
            right:5px;
        }
        .search-bar input[type="text"] {
          width: 100%;
          margin: 0;
          height: 100%;
          padding-left: 15px;
          box-sizing: border-box;
        }
        .sfield 
        {
            float: left;
            margin: 5px 0 0 8px;
            font: 8pt Verdana;
            color: #888;
            height: 20px;
            line-height: 18px;
            padding: 0;
            background: transparent;
            border: 0;
            max-width: 100%;
        }

<div id="right-side">
                   <div class="searchbox">
                            <h4 style="text-align:center;"> ค้นหาสินค้า </h4>
                                <div class="search-bar">
                                    <input type="text" size="20" class="sfield" name="searchterm" value="" placeholder="Search...">
                                    <input type="image" class="searchbutton" name="search" src="http://www.spheretekk.com/bc/images/search-icon.gif" alt="Search">
                                </div>
                    </div>
               </div>