Change font size for Mvc TextboxFor

Question

I am struggling to change the font size for MVC TextBoxFor?

I can change the font size when using:

input, textarea {}

But this changes all my input size's. I also tried to then add a css class to my TextboxFor:

@Html.EditorFor(model => model.UserName, new { @Class = "Mytextarea" })

css

.Mytextarea {
    font-size: 0.85em !important;
    height: 14px !important;
    color: #333 !important;
    /*font-family: inherit;*/
    width: 300px;

}

This has had no affect.

My TextBoxFor's are huge and bulky and i have no way to change them, If possible i would like to set styling to change them all at once.

Edit:

enter image description here

Did you see the chrome/firefox debugging tool(press f12) html element section and checked what css class was applied? — Murali Murugesan
– Murali Murugesan, Commented Jun 5, 2014 at 16:15
@Murali Yes it says "Text-box single-line" i have no idea where that style is from. That's the class its given, they styling looks like its taking input, dropdown. .... But its a text box :\ — Pomster
– Pomster, Commented Jun 5, 2014 at 16:16
Can you add the snapshot with chrome console? It should be from some css file only — Murali Murugesan
– Murali Murugesan, Commented Jun 5, 2014 at 16:18
Are you using any other form plugin? Are you sure the correct view you are looking into it?. I dont see any problem in MVC EditorFor. may be try with small letters @class="yourclass" — Murali Murugesan
– Murali Murugesan, Commented Jun 5, 2014 at 16:24
I don't even see .Mytextarea in the debugging window. Is that css rule in your site.css? — Blaise
– Blaise, Commented Jun 5, 2014 at 16:25

Community · Accepted Answer · 2017-05-23 12:21:45Z

2

So, you start your question off asking about TextBoxFor, but your actual code references EditorFor.

When using the EditorFor extension, you need to write a custom editor template to describe the visual components. If you don't, it will use the default template, which is where "text-box single-line" is coming from.

See this answer for a quick explanation on how to build a template that you can assign to the EditorFor helper. Or just use TextBoxFor like this.

@Html.TextBoxFor(model => model.UserName, new { @Class = "Mytextarea" })

edited May 23, 2017 at 12:21

CommunityBot

11 silver badge

answered Jun 5, 2014 at 17:59

Zack Huber

3372 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Change font size for Mvc TextboxFor

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related