Question 278970 in CSS Question posted in
Some basic documentation can be found here.

Css – What is the simplest way to have text be shown at full font-size inside an input container?

I have a table with a label in column 1 and an input field in column 2.

<table>
  <tr>
    <td>Title</td>
    <td><input type="text" name="title" value="My Title" /></td>
  </tr>
</table>

The input field text appears smaller than the label text. Fiddle. I assume this is because the input field takes space which seems to cause the input text to be smaller to fit within the remaining space?

What I want is for the input text to always be the same font size as the label text, expanding the row height if needed to accommodate. How to do this generically on table rows with various input fields?

Tags:

2

Answers


  1. 0

    Just add font-size property to the input element with the same size of your font.
    And you are good to go

    :root {
    font-family: sans-serif;
    font-weight: 200;
    font-size: 16px;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
#input1 {
  font-size: 16px;
}
    <table>
  <tr>
    <td>Title</td>
        <td><input type="text" name="title" value="My Title" id="input1" /></td>
  </tr>
</table>
    Login or Signup to reply.
  2. 0

    Either use CSS to set font properties, like font,font-family, font-size, color, etc. specifically or have those properties inherit the values set by a (ancestor) parent element. Essentially like you did in your Fiddle.

    Because:

    Most, if not all HTML <input type="..."> elements, as well as a few others like <select> and <option>, <label> have default markup values set by the User Agent (browser) to make them closely resemble the respective widgets used by the Operating System of your device (PC/smartphone) outside the browser.

    Think of default:

    • font settings.
    • graphics like colors, border and shadows.
    • behavior like dropdown or open/close Operating System modal windows (e.g. file selection modal).

    You can easily override fonts and graphics in your CSS, but changing behavior often requires the introduction of Javascript to ‘catch’ default actions and replace them with your own (usually some ‘Observer’ or ‘eventlistener’). A next step in the wondrous world of web design…

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search