CSS to style textbox in javascript

Question

This is probably an easy fix but I can't figure it out. I am trying to style the textbox to be the same width as the listbox.

You have defined PairTextbox instead of PairTextBox, check: jsfiddle.net/up1f1wjx — Leandro Carracedo
– Leandro Carracedo, Commented Jan 19, 2015 at 20:15
Just a little tip - in HTML there is a difference between a textbox and a text input. The element in your example is a text input rather than a textbox :) — rwacarter
– rwacarter, Commented Jan 19, 2015 at 20:16
you could make a div around the inputs and set the width to 100% jsfiddle.net/nxmc83re — Ba5t14n
– Ba5t14n, Commented Jan 19, 2015 at 20:19

Ravi Dhoriya ツ · Accepted Answer · 2015-01-19 20:14:27Z

1

You just forgot to write ID properly,

CSS

.teststyles input#PairTextbox {
    width: 80%;           ^---Typo here. IDs are case-sensitive. 
}

Look updated jsFiddle

answered Jan 19, 2015 at 20:14

Ravi Dhoriya ツ

4,4148 gold badges39 silver badges48 bronze badges

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

1 Comment

newuser456 Over a year ago

Thanks I missed that, helpful

Wilfredo P · Accepted Answer · 2015-01-19 20:14:29Z

1

You have a typo it's

.teststyles input#PairTextbox {
    width: 80%
}

because PairTextbox !== PairTextBox

LIVE DEMO

answered Jan 19, 2015 at 20:14

Wilfredo P

4,07430 silver badges46 bronze badges

Comments

AL-zami · Accepted Answer · 2015-01-19 20:35:53Z

1

you get your id name wrong in your css part.And instead of input ,you should add input[type='text'] as selector,otherwise it will effect all the input elements under the same class name.it will be

     .teststyles input[type='text'] #PairTextbox {
    width:80%;
}

Or you can add size attribute to your input text field.That will do .

<input id="PairTextbox" type="text" size='38'/>

for edit section:

just cut and paste the desired element and place it at the top of listItem box in your html.you should probably be able to do it by yourself .jsFiddle

edited Jan 19, 2015 at 20:35

answered Jan 19, 2015 at 20:20

AL-zami

9,20417 gold badges79 silver badges138 bronze badges

1 Comment

newuser456 Over a year ago

Thank you. Can you also help with the EDIT i made to the original question? @Wilfredo-P

Collectives™ on Stack Overflow

CSS to style textbox in javascript

3 Answers 3

1 Comment

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Related