CSS - Showing an error beneath an input

Question

I am looking to show an error message below a text input like so enter image description here

The message should not extend any wider than the width of the input, so I was thinking could I inherit the width of the input on say a span that sits below it?

Something like:

<div class="my-form-control-group has-error">
  <input type="text" class="my-form-control" >
  <p style="width:inherit;">Some Error Here</p>
</div>

My current attempt - http://jsfiddle.net/4eu2qkra/

I know this sample above will not work, and usage of inherit is wrong here since it will be looking to use the width of the parent div.

Is there a pure css way to inherit from a sibling element immediately before a target element? Maybe I'm going about this all the wrong way?!

Does the `input` element have a fixed width? Maybe you could show us your current CSS? — BillyNate, Jul 22 '15 at 16:02
I think what you are trying to achieve is simply an overhead. Why not just simply wrap everything into a `div` ? — Ioan, Jul 22 '15 at 16:02
Yeah I have wrapped in a div, see my edits and sample fiddle. I just wondered rather than use width of parent element, could I specifically use the width of a sibling using css alone — mindparse, Jul 22 '15 at 16:05
http://stackoverflow.com/questions/1817792/is-there-a-previous-sibling-selector — Germano Plebani, Jul 22 '15 at 16:17
Why don't divide the error message in several lines? If it is, you could use word-wrap property. See a example in http://www.w3schools.com/cssref/css3_pr_word-wrap.asp — Emiliano Sangoi, Jul 22 '15 at 16:18

score 0 · Answer 1 · answered Jul 22 '15 at 16:29

Use your wrapper DIV to control the width of the input and the error message. Make sure that the input has width: 100%; so that it will fill the wrapper DIV.

<div class="control-wrap">
    <input type="text">
    <p>Error Message. Error Message</p>
</div>

* {
    box-sizing: border-box;
}
.control-wrap {
    width: 50%;
    padding: 5px;
    background-color: red;
    border: 1px solid #666;
}
input {
    width: 100%;
    border: 1px solid #666;
}
p {
    margin: 5px 0;
}

jsFiddle: http://jsfiddle.net/2krc8tyL/

score 0 · Answer 2 · answered Jul 22 '15 at 17:10

You can wrap the input and error message in a div with display: table set on it, which will match the width of the largest child. This way it will adjust to the input's width.

.my-form-control-group {
  display: table;
  padding: 4px;
  
}

.my-form-control {
  width: 250px;
  border-width: 1px;

}

.my-form-control-group.has-error {
    color:white;
    border-color:red;
    background-color: red;
    padding: 1px 1px 4px 1px;
}

<div class="my-form-control-group has-error">
  <input type="text" class="my-form-control" >
  <div>Some Error Here</div>
</div>

score -3 · Answer 3 · answered Jul 22 '15 at 16:29

-3

The most obvious option is to use absolute positioning.

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.my-form-control-group {
  display: inline-block;
  position: relative;
  background: red;
  padding: 4px;
}
.my-form-control {
  border-width: 1px;
  display: block;
}
.error {
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  background: red;
  color: white;
  padding: 4px;
}

<div class="my-form-control-group has-error">
  <input type="text" class="my-form-control" />
  <p class="error">Some Error Here Lorem ipsum dolor.</p>
</div>

answered Jul 22 '15 at 16:29

Paulie_D

107,962
13
142
161

This breaks the flow. Any elements after the error will be displayed under it. – Jacob Jul 22 '15 at 17:11
Not sure that's an issue. The OP didn't mention that the flow was a requirement. – Paulie_D Jul 22 '15 at 17:54
True, but then I'm not sure how you can determine "the most obvious option". – Jacob Jul 22 '15 at 19:19
Because it's the only one (AFAIK) that limits the width of the error message to the width of the input *which is what the OP wanted*.. It doesn't make the input bigger to fit the text. Also, it doesn't require a width to be set on the input or wrapper. – Paulie_D Jul 22 '15 at 19:29

CSS - Showing an error beneath an input

3 Answers3