We help IT Professionals succeed at work.

How can I increase the width of the Html.TextBoxFor control beyond its default in an MVC 5 form

I am trying to increase the width of an Html.TextBoxFor control in an ASP.NET MVC 5 View page using razor syntax. I am using Visual Studio 2017. I created a css style (textboxfor) to increase the control's width as shown below but it is not working.

Below is the MVC View:

@using rgmsite.Models
@model LoginTestViewModel
    ViewBag.Title = "Log in";

<style type="text/css">
    .textboxfor-width {
        width: 700px;

        <section id="loginForm">
            @using (Html.BeginForm("Login", "Account",
              new { ReturnUrl = ViewBag.ReturnUrl }, FormMethod.Post,
              new { @class = "form-horizontal", role = "form" }))
                <div class="form-group">
                    @Html.TextBoxFor(m => m.Email,
                   new {  @class = "form-control textboxfor-width",
                       placeholder = "Enter email address to be used as your user name"

Below is the View Model being used:

  public class LoginTestViewModel
    public string Name { get; set; }
    public string Email { get; set; }

Using a smaller width value such as 40px in the css .textboxforworks.  But there seems to be some limit imposed on the control preventing it from being wider (such as 400px) than the default. What needs to be done to make the TextBoxFor control wider than the default?
Watch Question

Programmer Analyst
The style definition in the MVC View file will work as long as it  has a lower value than what is defined in the sites.css file for the input css class. The default value in my project was set at 280px. To have a larger width I had to increase the number from 280px.  I basically now have it set to 600px and define smaller widths in my MVC View file style definitions.