CODEWITHSUNDEEP
htmlcss
Fez Vrasta
Fez Vrasta

Reputation: 14815

Styling Input and button - height issue

I'm trying to setup a clean CSS to style a button to visually looks merged with the near input field.

example

I'm using this CSS currently:

button {
    position: relative;
    left: -4px;
    box-sizing: border-box;
    padding: 0 10px;
    margin: 0;
    font-size: 17px;
    border: 1px solid gray;
    border-radius: 0 3px 3px 0;
}

http://jsfiddle.net/GRwqL/

The main problem is the usage of the left property, I don't think it's a good practice, mostly because it's not handled correctly on all browsers.
The other problem is that this code in Internet Explorer and Firefox makes the button not high as the input field.

So I was looking for some help to write a better code cross-browser and cleaner.
Personally I don't care if is needed a wrapper element or any other HTML element, I just need a clean code, cross browser and that works well.

Upvotes: 5

Views: 3524

Answers (4)

Roko C. Buljan
Roko C. Buljan

Reputation: 206028

enter image description here

<span class="inputWithButton">
  <input type="text"><button>Submit</button>
</span>


 input, button{outline: none;}

.inputWithButton{
    display:inline-block;
    overflow:hidden;
    border:1px solid gray;
    border-radius: 3px;
}
.inputWithButton > *{
    vertical-align:top;
    border:0;
    margin:0;
    padding: 3px 10px;
}
.inputWithButton > input[type=text]{
    width:150px;
}
.inputWithButton > button{
    border-left:1px solid gray;
    background:#eee;
    cursor:pointer;
    width:70px;
}
.inputWithButton > button::-moz-focus-inner {
  border: 0;
}

DEMO with higher paddings and different borders colors : http://jsbin.com/OPiroyib/4/edit

enter image description here

(Just remove border from the span and add border to both input and button) That easy.

Upvotes: 4

Dan Murphy
Dan Murphy

Reputation: 648

Have you thought about using a simple span tag instead of a button and then attach an onclick event to it? The following seems to work ok for me - though you might need to use a reset / modenizer style sheet to make it more predictable on different browsers.

http://jsfiddle.net/GRwqL/13/

<input class="nospace"></input><span class="nospace">Submit</span>

.nospace {
    margin: 0;
    padding: 0;
}

span.nospace {
   height: 1em;
   margin: 0;
   padding: 1px;
   border: 1px solid black;
}

Upvotes: 0

Josh Crozier
Josh Crozier

Reputation: 240878

You need to override the default margin on the input element too.

jsFiddle example

input, button {
    margin:0;
}

In doing so, there will no longer be space between the elements, assuming there is also no space between them in the markup. Note, that inline elements respect the whitespace in the markup.

For instance, even after resetting the default margin there is space between the elements, if there is space between them in the markup (example)

For your second problem (making the elements the same height), do the following:

input, button {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    padding:0;
    margin:0;
    vertical-align:top;
    line-height:30px;
    height:30px;
}

Basically, use box-sizing to change the box model, again reset the margin/padding, use vertical-align:top for alignment issues, and then set an equal line-height/height on both elements.

jsFiddle example

Upvotes: 5

chris
chris

Reputation: 4867

Take a look at css-reset or normalize.css to set the defaults in all browsers to "null".
Also css frameworks like bootstrap are very cool!

Upvotes: 0

Related Questions