Text Field Taking Up Entire Row

Question

I have a text field that is expanding the entire horizontal distance to the window which I don't want. I've tried restricting the size in any way that I can think of:

<input class="searchField" id="searchBar" style="size:10;" type="text" size="10px" value="Search Here" />

with CSS:

#searchBar input
{
    width:10px;
}

.searchField 
{
    size:10px;
}

It is likely that somewhere the other HTML/CSS code is causing it to expand all the way. My question: is there a way to override it so that locally at that input text field, I can have my own size, say 10 pixels?

score 2 · Accepted Answer · answered Mar 01 '12 at 20:19

2

Just incase it is targeted with a different width property elsewhere, use

.searchField { width:10px !important; }

answered Mar 01 '12 at 20:19

Henerz

36
1

Just so you know. If this fixes it, it's probably a problem with your CSS. Search your CSS file(s) for the original declaration (.searchField) and try to fix the problem there. – Damien Mar 01 '12 at 20:34

score 1 · Answer 2 · answered Mar 01 '12 at 20:15

1

Change the width property.

#searchBar { 
  width: 10px; 
}

answered Mar 01 '12 at 20:15

Brandon

68,708
30
194
223

Sorry, I should have put this in instead, I've tried width with no avail. – user1152440 Mar 01 '12 at 20:20

score 1 · Answer 3 · answered Mar 01 '12 at 20:18

1

Try using the width css property.

.searchField 
{
     max-width: 10px;
}

answered Mar 01 '12 at 20:18

Derek Harrington

457
4
13

score 0 · Answer 4 · answered Mar 01 '12 at 20:16

0

I have never heard of a size CSS property. Do you mean width (say width: 10px)?

answered Mar 01 '12 at 20:16

dangerChihuahua007

20,299
35
117
206

score 0 · Answer 5 · edited May 23 '17 at 12:29

0

'size' is an invalid css property. Use width instead. Give your input a width of 100px for example, 10px is way too little. You may also want to have a look at Input size vs width

edited May 23 '17 at 12:29

Community

1
1

answered Mar 01 '12 at 20:17

T. Junghans

11,385
7
52
75

Text Field Taking Up Entire Row

5 Answers5