CODEWITHSUNDEEP
htmlcss
Yan Yi
Yan Yi

Reputation: 773

css targeting div instead of form

I have the following html code:

<div class="formDiv">
    <form id="searchForm">
        <input type="text" name="weathersearch" placeholder="Search places">
    </form>
</div>

With the following css, it looks like this

.formDiv {
    background-color: red;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

enter image description here

I wish to have a larger search box, not a larger div. But targeting either the form id or the div gave me the same results, shown below. How would I make the form itself larger (i.e bigger horizontally and vertically). 

#searchForm {
    width: 300px;
    height: 100px;
}

enter image description here

Upvotes: 0

Views: 79

Answers (2)

imtheman
imtheman

Reputation: 4843

.formDiv {
  background-color: red;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
  width: 300px;
  height: 100px;
}
#searchForm {
  height: 100%;
  width: 100%;
} 

#frmInput {
  height: 100%;
  width: 100%;
}
<div class="formDiv">
  <form id="searchForm">
    <input type="text" id="frmInput" name="weathersearch" placeholder="Search places">
  </form>
</div>

Upvotes: 0

Wex
Wex

Reputation: 15715

If you'd like to size the input element relative to .searchForm or .formDiv, do:

.searchForm input {
  height: 100%;
}

Otherwise, just set the height on the input element directly:

.searchForm input {
   height: 400px;
}

Upvotes: 3

Related Questions