0

So I have a User model that I am trying to let the user register with. Its all good but when I select a box to type in the box highlights with a blue color. I don't want this to happen. Also if validation fails the box turns red which I also I don't want to happen. Is this something I can turn off? Or maybe I'm using the wrong thing. I don't know, I'm super new to this and I just want it to look perfect.

So I have something like: 

 public class User
{
    [Key]
    public int Id { get; set; }

    [Required(ErrorMessage = "Please enter your first name.")]
    [Display(Name = "First Name:")]
    public string FirstName { get; set; }

    [Required(ErrorMessage = "Please enter your last name.")]
    [Display(Name = "Last Name:")]
    public string LastName { get; set; }

    [Required(ErrorMessage = "Please enter your email address.")]
    [Display(Name = "Email Address:")]
    [DataType(DataType.EmailAddress)]
    public string Email { get; set; }

    [Required(ErrorMessage = "Please enter a password.")]
    [Display(Name = "Password")]
    [DataType(DataType.Password)]
    public string Password { get; set; }
}

Then in my view I have:

 @using (Html.BeginForm())
    {
        @Html.TextBoxFor(m => m.FirstName, new { @placeholder = "First Name", @class = "TextBoxClass", autocomplete = "off" })
        @Html.TextBoxFor(m => m.LastName, new { @placeholder = "Last Name", @class = "TextBoxClass", autocomplete = "off" })
        @Html.TextBoxFor(m => m.Email, new { @placeholder = "Email Address", @class = "TextBoxClass", autocomplete = "off" })
        @Html.TextBoxFor(m => m.Password, new { @placeholder = "Password", @class = "TextBoxClass", autocomplete = "off", type = "password" })
        <br />
        <div>
            <span>@Html.ValidationMessageFor(m => m.FirstName)</span>
            <span>@Html.ValidationMessageFor(m => m.LastName)</span>
            <span>@Html.ValidationMessageFor(m => m.Email)</span>
            <span> @Html.ValidationMessageFor(m => m.Password)</span>
        </div>
        <input id="RegisterButton" type="submit" value="Sign Up" />
    }

Edit: Showing css for textboxclass below:

.TextBoxClass {
        width: 250px;
        height: 40px;
        font-size: 16px;
        font-family: Helvetica Neue, HelveticaNeue, Helvetica, Arial, sans-serif;
        text-decoration-color: none;
    }
Matthew The Terrible
  • 1,589
  • 5
  • 31
  • 53
  • 1
    What css-styles do you have on .TextBoxClass? – Oleksii Aza Mar 21 '14 at 01:54
  • By the way you would use @Html.PasswordFor on your Password property instead of setting type to "passord". – Oleksii Aza Mar 21 '14 at 01:55
  • 1
    The active blue is from the browser. You can try to override this but it may not work. The red is from an included stylesheet. To know exactly which you force the validation and use the bowser's inspect tool and it points to the exact stylesheet and rule. – Jasen Mar 21 '14 at 01:56
  • added css for .TextBoxClass. – Matthew The Terrible Mar 21 '14 at 01:56
  • oh okay I found the red and turned it off. That was easy, but the blue selection is bothering me. Is there a better way to get this user input that isn't a textboxfor that will give me the look I'm trying for? – Matthew The Terrible Mar 21 '14 at 02:00
  • 1
    `input[type="text"]:active { border: 1px solid green; }` is what would change the textbox color. But it seems the browser will always override this probably so user's can't be fooled into knowing what's active. – Jasen Mar 21 '14 at 02:03
  • 1
    Then inspect their login box and examine their style. – Jasen Mar 21 '14 at 02:07
  • 1
    http://stackoverflow.com/questions/3397113/how-to-remove-border-outline-around-text-input-boxes-chrome I can just set outline to none apparently. Or follow the steps found here. – Matthew The Terrible Mar 21 '14 at 02:09

0 Answers0