CSS - Showing an error beneath an input -
i looking show error message below text input
the message should not extend wider width of input, thinking inherit width of input on span 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 sample above not work, , usage of inherit wrong here since looking use width of parent div.
is there pure css way inherit sibling element before target element? maybe i'm going wrong way?!
use wrapper div control width of input , error message. make sure input
has width: 100%;
fill 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/
Comments
Post a Comment