How to make an input field have 100% width minus the width of the submit button?

Loading...

How to make an input field have 100% width minus the width of the submit button?

I have a very basic single input field with a 'submit' button alongside it. The search button has a fixed width of 104 pixels. Both are wrapped together with total width 50% of the browser viewport. It is my plan to allow the input field to enlarge as the browser window enlarges.
At the moment, for my specific browser window, I am having to fix the width of the input field to spread from the left of the wrapper to the left of the submit button. However, as I resize the window, it (obviously) doesn't adjust accordingly, and hence leaves a white space gap.
I have not found an answer to this question anywhere else. I am well aware that usually a width of 100% with a right padding of 104px will solve this kind of issue with other in-line elements. HOWEVER, the issue here is that the button cannot seem to sit above the padding, and instead moves to a new line.
How may I resolve this? Thanks!
EDIT:
Here's what I have so far. Visit jsfiddle.net/nWCT8/
The whole wrapper needs to be centered, and it needs to have majority browser support (although I don't mind if IE6 won't work with it). For this reason, I don't think 'calc' is quite suitable.

Solutions/Answers:

Answer 1:

Because you have a fixed height, you could use absolute position to achieve this (If you don’t require to support IE 6)

EDIT update my answer base on your jsfiddle, but I only could test it in current Chrome, Safari and FF right now.

jsfiddle

To get auto enlarging work proper with FF you need to use a wrapper around it and the input needs to have a width of 100%. To prevent the padding of the input elements to be added to the width the following css rules needs to be use:

-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */

box-sizing is supported by: IE 8+, Chrome, Opera 7+, Safari 3+, Firefox

EDIT
Styling input elements is typically problematic because of their padding and margin.
To have the result you want to achieve without the css3 calc feature you need to do the following steps:

  1. Define the height to the surrounding .form-wrapper and set its position to relative so that this element is responsible for the position absolute of the elements it contains.

  2. Wrap a container (.input-wrapper) around the the input element, defining its position as absolute with left:0px, top:0px, bottom:0px and right:[the width of your button] that way the wrapper always has a distance of the width of the button to the right side.

  3. Set the width and height of the input element to 100%. To prevent the padding of the input element to be added to the width you need to set the box-sizing to border-box.

  4. Set the position of the button to absolute with top:0px, bottom:0px and right:0 and setting the width to width: [width of your button]

Answer 2:

The chosen answer works fine, however, it’s overly complicated. Rewrote the answer to be MUCH simpler:

HTML:

<div class="halfWidth">
    <div class="input-wrapper">
        <input type="text" placeholder="Input text here"/>
    </div>
    <button type="submit">Search</button>
</div>

CSS:

.halfWidth {
    width:50%;
}
.input-wrapper {
    margin-right:100px;
}
input {
    float: left;
    width: 100%;
    -ms-box-sizing: border-box; /* ie8 */
    -khtml-box-sizing: border-box; /* konqueror */
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
    box-sizing: border-box; /* css3 rec */
}

View example at:
http://jsfiddle.net/nWCT8/4/

Answer 3:

For newer browsers that support CSS3, you could use calc():

width: calc(100% - 50px); // change 50px to width of button

Answer 4:

html:

<div>
    <input type="text" id="search" />
    <input type="button" value="Search" id="button" />
    <br class="clear: both;" />
</div>

css:

 * {
    padding: 0;
    margin: 0;

}

div {
    width: 70%;
    margin: 0 auto;    
    padding: 5px;
    background: grey;      
}

#search {
    width: calc(100% - 110px);        
    float: left; 
}

#button {
    width: 104px;
    float: left;    
}

jsfiddle

Our Awesome Free Tools

References

Loading...

Applying border to a checkbox in Chrome

Loading...

Applying border to a checkbox in Chrome

I have a lot of forms on my website with, of course, many of the fields in them being required. If required field is left empty, it is assigned an 'error' class and I'm trying to circle the field in red regardless whether it is a text field, drop down menu or a checkbox.
I have the following code in my css file:
.error input, .error select, .error textarea {
    border-style: solid;
    border-color: #c00;
    border-width: 2px;
}

Now strangely enough that works well in IE but in Chrome the checkboxes are not circled in red although I can see that the CSS is applied to them when inspecting the element.
And this might be irrelevant at the css code above is active but I do have something else in my css file:
input[type=checkbox] {
    background:transparent;
    border:0;
    margin-top: 2px;
}

And that is used so that the checkboxes are displayed correctly in IE8 and less.
Any ideas how I can visualize the red border in Chrome?
EDIT:
Here's a jsfiddle:
http://jsfiddle.net/PCD6f/3/

Solutions/Answers:

Answer 1:

Just do it like so (your selectors were wrong: .error input, .error select, .error textarea):

input[type=checkbox] {
    outline: 2px solid #F00;
}

Here’s the jsFiddle

Specifically for a checkbox use outline: 2px solid #F00;, BUT keep in mind that the border will still be visible. Styling input fields to look them well across multiple browsers is tricky and unreliable.

For a completely custom styled checkbox, see this jsFiddle from this Gist.

EDIT Play with: outline-offset: 10px;

Answer 2:

enter image description here

Check Box, and Radio Button CSS Styling Border without any image or content. Just pure css.

enter image description here

JSFiddle Link here

    input[type="radio"]:checked:before {
display: block;
height: 0.4em;
width: 0.4em;
position: relative;
left: 0.4em;
top: 0.4em;
background: #fff;
border-radius: 100%;
content: '';
}

/* checkbox checked */
input[type="checkbox"]:checked:before {
content: '';
display: block;
width: 4px;
height: 8px;
border: solid #fff;
border-width: 0 2px 2px 0;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
margin-left: 4px;
margin-top: 1px;
}

Answer 3:

Works for me.only outline doesn’t work.

input[type=checkbox].has-error{
outline: 1px solid red !important;
}

Our Awesome Free Tools

References

Loading...