HTML / CSS - <input> width

Question

HTML / CSS - <input> width

Even though some input was introduced on this, the question of width control <input>

remains open.

This issue is specific to a WordPress site, but reproducible in a very trivial manner.

Context: I have a checkbox driven, CSS nested header / text system. The checkbox is hidden and everything works well, except that I cannot control the width of the checkbox. Unless you override this about 14px wide - I want it to be the full width of the div; I cannot achieve this. (The checkbox must be above the next heading, hence the position is: absolute;)

The actual checkbox cannot be changed, but the clickable area can be: I am interested in the width of the clicked area.

HTML page HTML is (some abbreviations abbreviated for brevity)

<div id="left-area">
<article id="post-399" class="et_pb_post ...">
    <h1></h1>
    <p class="post-meta"></p>
    <div class="entry-content">
        <div class="nested-toggle">
            <input type="checkbox" checked="">
            <h2>Heading</h2>

The CSS style on the "left area" sets the width to 712px. However, if the <input>

width is given: 100%; it is 968px wide, which does not match <div id="left-area">

, but actually the outer (styled div.container {...}

to get width = 968px).

The effect can be reproduced with the following minimal example

<div class="leftside">
  <input type="checkbox" checked><i></i>
  <h2>a Heading</h2>
</div>

with style

div.leftside {width:900px;}
input[type="checkbox"] {
    position: absolute;
    width: 50%;
}

This was all done with Firefox (current version) and a minimal example with codepen.io code.

I am relatively new (again) to this; Did I do something stupid?

What is going wrong and how can I set <input>

to the correct width?

thank!

PS One from FF or WP seems to add </input>

after mine <input>

; technically, which seems to be invalid HTML as it throws a validation error in the W3C, but it doesn't seem to affect the rendering behavior.

+3

html css width

Julian moore May 23 '15 at 12:29

source share

2 answers

Gerasimos Pap · Answer 1 · 2015-05-23T12:43:51+0000

css3 @media rule

You might also need to take a look at the CSS3 @media rule .

By running the snippet, clicking the full page button, and then resizing the window, you will see the window become responsive to the page width.

As long as the page width is greater than 500 pixels wide, the div stays at 400 pixels wide.

But when the page gets smaller than 500px, the div width becomes 100px.

Check if your CSS stylesheet has @media value!

#tricolore {
        background-color: green;
        width: 400px;
        height: 50px;
    }

@media screen and (max-width: 500px) {
    #tricolore {
        background-color: red;
        width: 100px;
        height: 50px;
    }
}

<div id="tricolore"></div>

New answer

As we said, there was no way to resize the checkbox, but you can resize it.

We can use a div inside a label to indicate the size of our label.

Check out the following snippet in my example:

#myDiv{
  width:550px;
  height:90px;
  background-color:red;
}

#myInput{
  /*
  display:none;
  */
}

<label>
  <div id="myDiv">
    Text
   <input id="myInput" type="checkbox" name="something" value="something">      
    Text
  </div>
</label>

And a snippet with your minimal example (ignore red background).

#myDiv{
  background-color:red;
}

#myInput{
  /*
  display:none;
  */
}

div.leftside {width:900px;}
input[type="checkbox"] {
    position: absolute;
    width: 50%;
}

<label>
  <div class="leftside"id="myDiv">
   <input type="checkbox" checked><i></i>      
   <h2>a Heading</h2>
  </div>
</label>

Old answer

If you are trying to resize the box, I think it cannot be resized by changing the input width attribute. Is this what you are trying to do?

Or do you want to install CheckBox next to H2?

<h2><label for="a">Header</label> <input type="checkbox" name="header" id="a" value="Header" checked></h2>

Does it help?

https://jsfiddle.net/ysfbww7r/4/

Try this also.

Need headlines?

jBear Graphics · Answer 2 · 2015-05-23T14:33:51+0000

If I asked the question correctly, Julian Moore is right with a clickable shortcut ...

here's the updated fiddle (originally posted, linked from the following post How to create an HTML checkbox with clickable label )

http://jsfiddle.net/qYZFJ/1283/

HTML:

<label><input type="checkbox" /><h2>Option 1</h2></label>
<label><input type="checkbox" /><h2>Option 2</h2></label>
<label><input type="checkbox" /><h2>Option 3</h2></label>

CSS

label {
 border:1px solid #ccc;
 margin:0 0 10px;
 display:block; 
}
label:hover {
 background:#eee;
 cursor:pointer;
}
label>input[type=checkbox] {
    display: none;
}
label>input[type=checkbox] + h2 {
    background: #f2d4d4;
    display: block;
    padding:10px;
}
label>input[type=checkbox]:checked + h2 {
    background: red;
}

EDIT:

here is another fiddle showing a pure css / html text system ...

http://jsfiddle.net/qjLguro9/2/

HTML:

  <label class="toggle" for="chkShow1">Show first element</label>
  <input id="chkShow1" type="checkbox">
  <div>Lorem Ipsum ... however, this is the first content</div>

  <label class="toggle" for="chkShow2">Show second element</label>
  <input id="chkShow2" type="checkbox">
  <div>This is the second content ;)</div>

CSS

.toggle{
  font-size: 16px;
  display: block;
  width: 150px;
  border: 1px solid gray;
}
.toggle + input{
  display:none;
}
.toggle + input + *{
  display:none;
  margin-bottom: 4px;
}
.toggle+ input:checked + *{
  display:block;
}

HTML / CSS - <input> width

css3 @media rule

New answer

Old answer

More articles: