How do I specify the size of text box using CSS? | XM Community
Solved

How do I specify the size of text box using CSS?

  • 8 December 2017
  • 2 replies
  • 457 views

Userlevel 4
Badge +2
  • Qualtrics Employee
  • 23 replies
How do I specify the size of text box using CSS?
icon

Best answer by lillianc 11 December 2017, 22:18

View original

2 replies

Userlevel 5
Badge +7
Here are some CSS examples for text boxes. Edit the width parameter as you please and enter the code into the Question Text HTML View. If you want the style to hold through the whole survey and not just on the page, put the code in the custom CSS of the look and feel.


For Single Line Text Entry:
`<style>`
`.Skin .TE .SL .InputText{`
`width: 100px;`
`}`
`</style>`

For Multiple Line Text Entry:
`<style>`
`.Skin .TE .ML .InputText{`
`width: 100px;`
`}`
`</style>`

For Essay Text Entry:
`<style>`
`.Skin .TE .ESTB .InputText{`
`width: 100px;`
`}`
`</style>`

For Forms:
`<style>`
`.Skin .TE .FORM .InputText{`
`width: 100px;`
`}`
`</style>`

For Constant Sum:
`<style>`
`.Skin .CS .SumInput input.InputText, .Skin .CS .SumTotal input, .Skin .CS input.SumInput {`
`width: 40px;`
`}`
`</style>`

For Matrix Text Entry:
`<style>`
`.Skin .Matrix .TE .Short td input {`
`width: 140px;`
`}`
`</style>`

Hi!

Thanks for this helpful tool lillianc. I have a follow-up question. I used the code above for multiple line and it worked great. The only problem I ran with is that I also have a pre-populated textbox that I want to increase with the CSS but it is not working with the code above. Do pre-populated textboxes have different styles?

Thanks in advance for the help.

Leave a Reply