CSS- Changing the width of a search box

Question

I'd been trying to change the width of the search box in name="size" of my HTML template but can't do it even when I tried width:.

html:

<form class="form" method = "POST" >

        <h1>Soccer Shoes Finder</h1>
        <div class="line-separator"></div>

            <div class="container-fluid form-inline">

                <input class="form-control" name = "name" type="text" placeholder="Name"/>
                <input class="form-control" name = "size" type="text" placeholder="Size"/>
                <button class="form-control fa fa-search" aria-hidden="true"></button>
            </div>

</form>

css of the element:

input[name="size"]{
  width: 50%;
}

Here's a codepen for better context:

http://codepen.io/tadm123/pen/ZLVWpd

Solution 1

I recommend using this method.

<form class="form" method="POST">

  <h1 class="text-center">Soccer Shoes Finder</h1>
  <div class="line-separator"></div>

  <div class="container ">

    <div class="row">
      <div class="col-md-4">
        <input class="form-control" name="name" type="text" placeholder="Name" />
      </div>
      <div class="col-md-7">

        <input class="form-control" name="size" type="text" placeholder="Size" /></div>

      <div class="col-md-1">
        <button class="form-control " aria-hidden="true"><i class="fa fa-search"></i></button></div>
    </div>

  </div>

</form>

Updated Codepen: http://codepen.io/hunzaboy/pen/aJJpMK

Solution 2

It's getting overwritten by the bootstrap defaults. Specifically:

.form-inline .form-control {
    display: inline-block;
    width: auto;
    vertical-align: middle;
}

You need to adjust your selector to fix the cascade:

.form-inline input.form-control[name="size"]{
  width: 50%;
}

Solution 3

did you try size attribute?

<input type="text" size="15"/>

Solution 4

The input elements use by default display: inline;, you cannot define a width in elements who using that display, if your change the display to display: inline-block; you will can change the width of your element.

input[name="size"]{
  width: 50%;
  display: inline-block; /* <--- Here the change */
}

View more solutions

Comments

[Aslam]

what output do you want?

[tadm123]

I would like that "size" search box cut to half of it's width.

[Aslam]

check my answer, you can change the col-md- value to your need.

[Jimmy Sehgal]

ya I just tried on your codepen it works, make sure you use size="1" or size="2"

[Aslam]

You can change the col values per your need to fully control the sizes.

[tadm123]

I see, seems like a much better way.

[Hp93]

Useful tip, but it is not an answer. Instead, you should leave a comment in the question (if you can).

[Sunderam Dubey]

@Hp93 The poster has no reputation for comment, they are allowed only after 50 reputation.