does not change the size of input field

Question

My code:

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    <title>Challengers</title>
</head>
<body>
<div class="w3-container" align="center">

    <form action="/addChallenger" method="post" class="w3-container w3-card-4 w3-light-grey w3-text-blue w3-margin w3-center" style="width: 50%" >
          <div class="w3-row w3-section">
            <div class="w3-col" style="width:50px"><i class="w3-xxlarge fa fa-user"></i></div>
            <div class="w3-rest">
                <input class="w3-input w3-border" size="40" name="lastName" type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for last names.." title="Type in a last name">
            </div>
        </div>
    </form>
</div>
</body>
</html>

So, in follow string, I use size parameter for setting size of input field, but in result I not have any effect.

<input class="w3-input w3-border" size="40" name="lastName" type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for last names.." title="Type in a last name">

How to correctly set the size of field?

You do set the size correctly -- that's what `size` attribute is for, it lets you gauge your approximate/desired size for the input. You better make sure there isn't some CSS rule applied to your input control, you can test so with e.g. Firefox or Chrome, both have Developer Tools to aid you there. — Armen Michaeli, Dec 08 '18 at 18:11
How to can I change CSS rule? I am not frontend developer - I am beginner in `java`, so I am do not know how to use Developer Tools in browsers — Valentyn Hruzytskyi, Dec 08 '18 at 18:21

Martin · Accepted Answer · 2018-12-08T18:34:49.523

2

How to correctly set the size of field?

In HTML5 You should be using CSS, however both size in the HTML and CSS rules will work, but the CSS will over-rule any size value given.

CSS has a special unit called the ch unit. (see here and here) which is valid in all current browsers (except Opera Mini).

Further, the character width default should be defined by a font-size CSS element somewhere in the DOM hierarchy.

input[type=text]{
  /* Set width to 40characters */
  width: 40ch;
  /* prevent overflow of container */
  max-width: 100%; 
}

<input class="w3-input w3-border" name="lastName" type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for last names.." title="Type in a last name">

edited Dec 08 '18 at 18:34

answered Dec 08 '18 at 18:29

Martin

22,212
11
70
132

One more: how to set input field position in center? – Valentyn Hruzytskyi Dec 08 '18 at 21:15
@ValentynHruzytskyi you mean the text in the centre of the input or the input in the centre of the screen? – Martin Dec 09 '18 at 11:48
input of the centre of the screen – Valentyn Hruzytskyi Dec 09 '18 at 13:08
1

@ValentynHruzytskyi there are **LOTS** of StackOverflow [Q&A on](https://stackoverflow.com/questions/1725759/css-how-to-center-box-div-element-directly-in-center) [this](https://stackoverflow.com/questions/114543/how-to-horizontally-center-a-div) [topic](https://stackoverflow.com/questions/618097/how-do-you-easily-horizontally-center-a-div-using-css), try and dig them out yourself `;-)` – Martin Dec 09 '18 at 13:28

does not change the size of input field

1 Answers1