How to Make HTML Textbox Full Width of Page

Question

 <form method="post" class="mobile-login-form _5spm" id="u_0_0" novalidate="1" data-autoid="autoid_1"> <input type="hidden" name="lsd" value="AVpe_Wp1" autocomplete="off"> <input type="hidden" name="charset_test" value="€,´,€,´,水,Д,Є"> <input type="hidden" name="version" value="1"> <input type="hidden" id="ajax" name="ajax" value="0"> <input type="hidden" id="width" name="width" value="0"> <input type="hidden" id="pxr" name="pxr" value="0"> <input type="hidden" id="gps" name="gps" value="0"> <input type="hidden" id="dimensions" name="dimensions" value="0"> <input type="hidden" name="m_ts" value="1421117640"> <input type="hidden" name="li" value="yIi0VOqdqMbfGzXVr-lypMC-"> <div class="_56be _5sob"> <div class="_55wo _55x2 _56bf"> <input autocorrect="off" autocapitalize="off" type="email" class="_56bg _55ws _5ruq" name="email" placeholder="Email Address"> <p> <input autocorrect="off" autocapitalize="off" class="_56bg _55ws _5ruq" placeholder="Password" name="pass" id=password type="password"> <div class="_55ws"> <button type="submit" value="Submit" class="_56bs _56b_ _56bw _56bu" name="login" id="u_0_1" data-sigil="touchable"><span class="_55sr">Submit</span></button> </div> </div> </div> <noscript>&lt;input type="hidden" name="_fb_noscript" value="true" /&gt;</noscript> </form> 

I was wondering how I can create the following text boxes to expand their width to cover the full page (just the width though). Here is my code:

Answer 1

The Question is very vague, and I don't know what you've tried. However to cover the full page use this CSS. You did mean the input fields? If not I'll update his answer.

  input{
       width: 100%;
    }

CODEPEN DEMO

Answer 2

See the first input field for full width:

  <form method="post" class="mobile-login-form _5spm" id="u_0_0" novalidate="1" data-autoid="autoid_1"><input name="lsd" value="AVpe_Wp1" autocomplete="off" type="hidden"><input name="charset_test" value="€,´,€,´,水,Д,Є" type="hidden"><input name="version" value="1" type="hidden"><input id="ajax" name="ajax" value="0" type="hidden"><input id="width" name="width" value="0" type="hidden"><input id="pxr" name="pxr" value="0" type="hidden"><input id="gps" name="gps" value="0" type="hidden"><input id="dimensions" name="dimensions" value="0" type="hidden"><input name="m_ts" value="1421117640" type="hidden"><input name="li" value="yIi0VOqdqMbfGzXVr-lypMC-" type="hidden"><div class="_56be _5sob"><div class="_55wo _55x2 _56bf"><input style="width: 100%;" autocorrect="off" autocapitalize="off" class="_56bg _55ws _5ruq" name="email" placeholder="Email Address" type="email"><p><input autocorrect="off" autocapitalize="off" class="_56bg _55ws _5ruq" placeholder="Password" name="pass" id="password" type="password"></p><div class="_55ws"><button type="submit" value="Submit" class="_56bs _56b_ _56bw _56bu" name="login" id="u_0_1" data-sigil="touchable"><span class="_55sr">Submit</span></button></div></div></div><noscript>&lt;input type="hidden" name="_fb_noscript" value="true" /&gt;</noscript></form> 

It's this line:

<input style="width: 100%;" autocorrect="off" autocapitalize="off" class="_56bg _55ws _5ruq" name="email" placeholder="Email Address" type="email">

Answer 3

Add class to the fields you want to resize. Like add class="fullwidth" and update following code in css

input.fullwidth{width:100%}

Please let me know if it works for you.