Change width of HTML <form> using CSS

Question

I have an input field surrounded by a form in a navbar and I would like to reduce the size of the form to about 75% of the width of the container it is currently inside.

When there is no <form></form>, the input is exactly 75% the size of the container it's in and it looks perfect.

Incomplete Navbar HTML code:

<nav class="navbar fixed-top navbar-expand-lg navbar-dark">
        <div class="container" id="home">
            <form method="post">
                <div class="input-group md-form form-sm form-2 pl-0" id="search" method="post">
                    <input type="text" name ="search" id ="search" placeholder="Search Users" aria-label="Search" class="form-control my-0 py-1">
                    <div class="input-group-append">
                        <button class="btn btn-outline-secondary" type="submit" id="navbarButton"><i class="fas fa-search text-grey" aria-hidden="true"></i></button>
                    </div>
                </div>
            </form>
            <button class="navbar-toggler ml-auto" type="submit" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

CSS code I tried:

#search {
    max-width: 75%;
}

form {
    width: 75%;
}

The form does not change size and remains the same size regardless of the screen width.

symlink · Accepted Answer · 2019-06-17 00:40:30Z

3

Looks fine to me:

.container{
  width: 100%;
  background: tomato;
}

#search {
    max-width: 75%;
}

form {
    width: 75%;
  background: gray;
  margin: 0 auto;
}

<nav class="navbar fixed-top navbar-expand-lg navbar-dark">
        <div class="container" id="home">
            <form method="post">
                <div class="input-group md-form form-sm form-2 pl-0" id="search" method="post">
                    <input type="text" name ="search" id ="search" placeholder="Search Users" aria-label="Search" class="form-control my-0 py-1">
                    <div class="input-group-append">
                        <button class="btn btn-outline-secondary" type="submit" id="navbarButton"><i class="fas fa-search text-grey" aria-hidden="true"></i></button>
                    </div>
                </div>
            </form>
            <button class="navbar-toggler ml-auto" type="submit" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

answered Jun 17, 2019 at 0:40

symlink

12.2k7 gold badges31 silver badges57 bronze badges

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

3 Comments

user8888293 Over a year ago

Doesn't seem to be working for me. Could it possibly be because I'm using Bootstrap 4?

symlink Over a year ago

@Nate Yes, that could be it. Temporarily disable it and see what happens. You may be able to override it by giving your style rules important! declarations.

user8888293 Over a year ago

Yes, you are right. Turns out it's a lot of spaghetti Bootstrap code mixed in with what I was doing. I added the <form></form> tags without double checking what I was doing and whether it follows Bootstrap's rules. Thank you.

user206 · Accepted Answer · 2019-06-17 01:09:45Z

0

I think I understand what you mean:
Change

container

to

container-fluid

answered Jun 17, 2019 at 1:09

user206

1,1051 gold badge10 silver badges15 bronze badges

Collectives™ on Stack Overflow

Change width of HTML <form> using CSS

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related