HTML/CSS - width

Question

Whilst there has been some input on this, the question of width control of <input> remains open.

This problem relates to a WordPress site, but is reproducible in a very trivial form.

Context: I have a checkbox controlled, CSS nested heading/text toggle system. The checkbox is hidden and it all works well, except that I have no control over the checkbox width. Unless overridden it is about 14px wide - I want it full div width; I cannot achieve that. (The checkbox must sit over the following heading, hence position: absolute;)

The actual checkbox cannot be resized, but it's clickable area can be: I am interested in the click area width.

The WP page HTML is this (some bits truncated 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>

Theme CSS styling on "left-area" sets the width at 712px. However, if the <input> is given width:100%; it comes out with a width of 968px, which is not that of the <div id="left-area"> but in fact that of an outer (styled by div.container {...} to give 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 styling

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

This was all done with Firefox (current version) and the minimal example checked at codepen.io.

I'm relatively new (again) to this; I have I done something stupid?

What's going wrong, and how can I set <input> to have the right width?

Thx!

PS One of FF or WP seems to add </input> after my <input>; technically that seems to be invalid HTML as it causes an error when validating at W3C but it doesn't seem to affect the rendering behaviour.

Answer 1

css3 @media rule

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

By running the snippet, clicking full page button and then resize the window you will see that the box become responsive in relation to the page width.

While the page has more than 500px width the div's width stay at 400px.

But when the page become lower than 500px the div's width become 100px.

Check if your css stylesheet has @media rule!!!

#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 the label of it.

We can use a div inside a label to give size to our label.

Check the following snippet with 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 the snippet with your minimal example (Ignore the 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 change the Box size i think it cannot be changed by changing the width attribute of the input. Is this what you are trying to do?

Or you want to set CheckBox near H2?

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

Does this help?

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

Try this one also.

Do you need the Headings?

Answer 2

If I got your question right, Julian Moore is right with the clickable label...

here's an updated fiddle (originally posted related to the following entry How to create an HTML checkbox with a 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-toggle 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;
}