Css: Styling An Input Element's Text (as Opposed To The Input Element Itself)?

EDIT: I've added the relevant code below at the bottom of this question. As you'll see there, the button is wrapped within a div. Also, this problem only occurs in one browser, tha

Solution 1:

For some reason form elements are particular and quirky about font.

• Assign a font to the <submit>'s parent, then use font: inherit on the <submit> button.

• On the <submit> assign line-height of 1.4 to 2 (notice there's no unit like px or em.) I actually have the line-height assigned by inheriting the font from <form>1.4.

• Set width using the ex unit of measurement. One ex is as wide as ax character, making it a great way of gauging how much space you are using in relation to your text. I used 9ex for a 6 character word (i.e. Submit).

• This ruleset may help you for Firefox:

  input::-moz-focus-inner {
      border: 0;
      padding: 0;
  
      /* Some users have said these last two are 
         unnecessary or should be -2px */margin-top:0;  
      margin-bottom: 0;
    }
  

Here's some changes I did to your button and search field:

#zoekknop {....
        ....
        border: 2px double white;
        line-height: 1.65;
        vertical-align: baseline;
      }

      #search-text {
         line-height: 1.75;
         vertical-align: baseline;
         padding: 4px3px0;
       }

Review the Snippet below:

#form {
  font: 40016px/1.4'Verdana';
}
#form.sub {
  font: inherit;
  width: 9ex;
  color: blue;
  border-radius: 5px;
}
#form.sub:hover {
  color: cyan;
  background: #888;
}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/#zoekform {
  height: 29px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 9px;
  font: 40016px/1.4'Verdana';
}
#zoekform#zoekknop {
  
  color: white;
  font-size: 18px;
  box-sizing: border-box;
  background-color: #446666;
  color: white;
  
  border: 2px double white;
  line-height: 1.65;
  vertical-align: baseline;

}
#search-text {
  line-height: 1.75;
  vertical-align: baseline;
  padding: 4px3px0
}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/input::-moz-focus-inner {
  border: 0;
  padding: 0;
  margin-top: 0;
  margin-bottom: 0;
}

<formid="form"name="form"><inputtype="submit"class="sub"value="Submit" /></form><formid="zoekform"><inputtype="text"class=""id="search-text"name="search-text"placeholder="Search"><inputid="zoekknop"type="submit"method="GET"value="Search!" /></form>

Solution 2:

This should work
#buttonID{
  width: 500px;
  height: 500px;
  padding-bottom: 100px;//pushes text up inside the button
}

Solution 3:

Make sure you define the height, width, line-height, font-size, and padding of the button. Then you should be able to manipulate the padding and line-height to get the result you want. It sounds like the button may be inheriting a line height that is causing the issue.

Targeting the text itself isn't the way to go about this. Would be helpful to see the CSS and HTML of the button, and note which browser the issue appears in.