CODEWITHSUNDEEP
css
Derek J
Derek J

Reputation: 151

How can I create a border around an input button?

Here's a fiddle

I have this code where I tried to make a button have a blue line around it. But when I ran the code I just get a blue line at the top of the button. I added disply: inline-block but that doesn't seem to work. Is there some way I can make the div's border surround the input button?

<div id="A">
   <div style="border: 1px solid Blue">
      <input style="float: left; display: block" type="button" onclick="doTest('total'); return false;" />
   </div>
   <div id="B" style="display: block; float: left;">ABC</div>
</div>

Upvotes: 2

Views: 11356

Answers (5)

NGLN
NGLN

Reputation: 43659

Why all those divs?

See demo Fiddle.

HTML:

<form id="A" action="">
    <fieldset>
        <span><input id="button1" type="button" value="Caption" onclick="" /></span>
        <label id="B" for="button1">ABC</label>
    </fieldset>
</form>

CSS:

#A span {
    border: 1px solid blue;
}

Upvotes: 2

Patrick
Patrick

Reputation: 17973

If you want the text ABC inside the blue border you have to move it inside the div with the border, combined with the height "trick" as suggested by spektom.

<div id="A">
   <div style="border: 1px solid Blue; min-height:20px">
      <input style="float: left; display: block"
             type="button"
             onclick="doTest('total'); return false;" />
      <div id="B" style="display: block; float: left;">ABC</div>
  </div>
</div>

Upvotes: 0

sudipto
sudipto

Reputation: 2482

<div id="A">
   <div style="border: 1px solid Blue;float:left">
      <input style="display: block" type="button" onclick="doTest('total'); return false;" />
   </div>
   <div id="B" style="display: block; float: left; margin-left:100px;">ABC</div>
</div>

Upvotes: 0

Michael Spector
Michael Spector

Reputation: 37009

Setting height on a DIV that wraps INPUT can help:

<div id="A">
   <div style="border: 1px solid Blue; height: 20px;">
      <input style="float: left; display: block" type="button" onclick="doTest('total'); return false;" />
   </div>
   <div id="B" style="display: block; float: left;">ABC</div>
</div>

Upvotes: 0

Dmitry Negoda
Dmitry Negoda

Reputation: 3189

Remove "float: left" from your input and add it to the surrounding div.

Upvotes: 2

Related Questions