All,
I need to have any input validation messages display below the element instead of next to it. The base CSS file puts a margin-bottom = 19px on the <input /> element so I need to offset this because if I don't the message gets inserted 19px below the input element.
Example:
http://jsfiddle.net/L28E7/2/
ASP.NET is generating all of the HTML so I am hamstrung somewhat in terms of what I can do.
I can access the .field-validation-error class and override it so that's what I did.
My CSS works (In FireFox at least) and produces the following:
I had to use negative margin-top to get the message right under the element, which I am not happy with.
How can I improve this?
Thank you!
The CSS
div .field-validation-error {
color: #C1372A !important;
display: block;
font-weight: normal !important;
margin-top: -19px;
margin-bottom: 10px;
}
The HTML
<div>
<label for="NewClub.NewClubName">Name your club!!!</label>
<span class="required">*</span>
</div>
<input type="text" value="" name="NewClub.NewClubName" id="NewClub_NewClubName" data-val-required="Please provide your club with a name." data-val="true" class="text-box single-line">
<span class="field-validation-valid" data-valmsg-replace="true" data-valmsg-for="NewClub.NewClubName"></span>
if this is how your HTML looks after the creating of inline error message
<input type="text" value="" name="NewClub.NewClubName" id="NewClub_NewClubName" data-val-required="Please provide your club with a name." data-val="true" class="text-box single-line">
<span class="field-validation-error" data-valmsg-replace="true" data-valmsg-for="NewClub.NewClubName">heloo hell</span>
Then use the below css. This will automatically put your message below the text box
.field-validation-error {
color: #C1372A !important;
display: block;
font-weight: normal !important;
}
Here is the fiddle
http://jsfiddle.net/L28E7/
Related
I have a field in my html page like this:
<input type="text" class="form-control" readonly>
I would like it to look like normal text between <p> tags. Please help me CSS wizards.
you can try this
CSS
input[readonly]{
background-color:transparent;
border: 0;
font-size: 1em;
}
if you want to use with a class you can try this one
HTML
<input type="text" class="form-control classname" value="Demo" readonly />
CSS
input[readonly].classname{
background-color:transparent;
border: 0;
font-size: 1em;
}
if you want to make the <input> look like inline text (resizing the input element) please check this fiddle https://jsfiddle.net/Tanbi/xyL6fphm/ and please dont forget calling jquery js library
I realise the question is about Bootstrap 3, but it might be good to know that Bootstrap 4 now has this out of the box: https://getbootstrap.com/docs/4.0/components/forms/#readonly-plain-text
<div class="form-group row">
<label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="text" readonly class="form-control-plaintext" id="staticEmail" value="email#example.com">
</div>
in addition to the accepted answer, I found that the following style works a bit better:
input[readonly] {
background-color: transparent;
border: 0;
box-shadow: none;
}
Bootstrap introduces a shadow that one may want to hide.
<input type="text" placeholder="Show your text" readonly style="border: 0px;" />
That should work
Bootstrap 5 has form-control-plaintext class for that:
<input type="text" readonly class="form-control-plaintext" id="email"/>
Pardon me if this question is already answered, but I couldn't find it.
I am trying to put an asterisk after all <input required> elements.
I found that I can style these with the :required selector.
I would like to use the :after pseudoelement to add an asterisk.
My CSS:
*:required:after {
content:"*";
font-size:48px;
color:red;
position:relative;
top:9px;
}
In Opera 30 and Chrome 40, I see this (note that nearly all of these have the required attribute, see code below.):
In Firefox 39, IE 11, and Edge no pseudoelements are displayed.
Why is it that the pseudoelement only displays on the <input type="date"/> and not on any of the other inputs or selects? And, more importantly, how can I make it display on all required elements?
I'm using bootstrap3 and jquery, if that matters.
HTML:
<label>Title
<select name="title" id="title" class="form-control" required> <!-- Trigger Gender here I think... -->
<option value="Mr.">Mr.</option>
<option value="Mrs.">Mrs.</option>
<option value="Miss">Miss</option>
<option value="Ms.">Ms.</option>
<option value="Dr.">Dr.</option>
<option value="Rev.">Rev.</option>
</select>
</label>
<label>First Name (as on Passport) <input type="text" name="firstName" id="firstName" placeholder="Charles" class="form-control" required/></label>
<label>Last Name (as on Passport) <input type="text" name="lastName" id="lastName" placeholder="Studd" class="form-control" required/></label>
<label>Maiden Name (if applicable) <input type="text" name="maidenName" id="maidenName" class="form-control"/></label>
<label>Other Names <textarea name="aliases" id="aliases" placeholder="C. T. Studd" class="form-control"></textarea></label>
<label>Date of Birth <input type="date" name="birthday" id="birthday" class="form-control" placeholder="12/02/1860" required/></label>
<label>Gender Autofilled
<select name="gender" id="gender" class="form-control" required>
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</label>
Note that the spec says: Note. This specification does not fully define the interaction of :before and :after with replaced elements (such as IMG in HTML). This will be defined in more detail in a future specification. So this is not invalid behavior.
Pseudo-elements don't work on inputs, because inputs are empty elements. You'll have to put an element after each input, then use the :required pseudo-class and the + combinator to style that.
:after or :before doesn't work on input or img elements. It can be used on container elements e.g. <div></div>
Reference
In your case I suggest you make use of label instead of input elements. Add a class for label elements which has a required input inside. Of course this would need a bit more of work since you have to set the positions correctly.
e.g.
<label class="required-container">
First Name (as on Passport)
<input type="text" name="firstName" id="firstName" placeholder="Charles" class="form-control" required/>
</label>
Your css:
label.required-container:after {
content:"*";
font-size:48px;
color:red;
position:relative;
top:9px;
}
Currently, the spec does not define behavior of pseudoelements with replaced elements, so this is not required to be consistent across browsers or even within browsers apparently.
The reason is that insertion using content makes a replaced element, and replaced replaced elements are not yet defined. From MDN, replaced elements are: external objects whose representation is independent of the CSS. Typical replaced elements are <img>, <object>, <video> or form elements like <textarea> and <input>. Some elements, like <audio> or <canvas> are replaced elements only in specific cases. Objects inserted using the CSS content properties are anonymous replaced elements.
Until an indeterminate future draft, the best bet is either to use the *:required+:after selector with an empty span (or whatever) or use :required pseudoclass with something that can be used with a replaced element, like a background-image.
We can hope that the current behavior of -webkit- in replacing content:'' after type='date' points toward allowing pseudoelements on all elements. We'll see.
One way to influence what is displayed "in the" input based on one of the input's attributes is to simply place a span or any other suitable element after the input. Then, it is just simple linking via adjacent selector.
Fiddle: http://jsfiddle.net/hvzjf002/.
HTML:
<label>
<input type = "text" required/><span></span>
</label>
CSS:
label {
display: inline-block;
position: relative;
}
label > input {
height: 25px;
font: normal 14px/25px Sans-Serif;
padding: 0 25px 0 10px;
border-radius: 5px;
border: 1px solid #aaa;
outline: 0;
}
label > input:required + span:before {
content:"\f069";
font: normal 14px/1 "Font Awesome";
color: red;
position: absolute;
bottom: 50%;
right: 5px;
transform: translateY(50%);
}
I am using bootstrap 3 & the issue is that label for the checkbox is overlapping the text. I have tried a few thing things but did not work, so if someone can help I will really appreciate it. This is what the code looks like, The class of the form is form-horizontal
<div class="checkbox">
<label class="checkbox-inline no_indent">I have read and agree with privacy and disclosure policy.
<input name="Terms" id="Terms" type="checkbox" ></label>
</div>
It's supposed to be like this with Bootstrap, <input> first and text after. http://jsfiddle.net/sqax02ah/
<div class="checkbox">
<label class="checkbox-inline no_indent">
<input name="Terms" id="Terms" type="checkbox">
I have read and agree with privacy and disclosure policy.
</label>
</div>
You can follow other answers if you do need the checkbox appears at the end.
In Bootstrap the styles expect thecheckbox to be first and then the text and hence a margin-left: -20px is set. For you snippet you need to add custom styles.
.radio input[type=radio], .radio-inline input[type=radio], .checkbox input[type=checkbox], .checkbox-inline input[type=checkbox] {
margin-right: -20px;
margin-left: 0;
}
Fiddle
Try use display: inline-block for .checkbox class, its should to help. Or change position via margin margin-left: 20px;
Is it possible in an HTML form to mark several input elements as readonly or disabled by wrapping them with something?
I know you can set the form itself as disabled for example, but that of course disabled the whole form. I'm thinking something like:
<form>
<input name="not-readonly">
<div readonly="readonly">
<input name="readonly-field-1">
<input name="readonly-field-2">
</div>
<input type="submit">
</form>
Or could this be solved with CSS somehow? Or maybe only with Javascript?
Just found out that you can disable a group of form elements using the fieldset tag. However, it seems to be slightly buggy in certain versions of IE. There also is no support for the readonly attribute, which unfortunately was the one I needed in this case... maybe it'll be added later?
<form>
<input name="not-disabled">
<fieldset disabled>
<input name="disabled-field-1">
<input name="disabled-field-2">
</fieldset>
<input type="submit">
</form>
I'm assuming you know how to disable inputs in the regular way based on the fact that you have 34k rep.
<input disabled="disabled" type="text" name="something"/>
Easily done with jquery of course (example based on your markup)
$('div[readonly="readonly"]').find('input').attr('disabled','disabled');
You can't actually disable an input with css, but you can fake a disabled input with css like:
.fakeinput {
padding: 4px;
font-family: monospace;
font-size: .8em;
color: #aaa;
border: #999 1px solid;
background: fff;
border-radius: 1px;
margin: 5px 0;
box-shadow: inset 1px 1px 2px #ddd;
}
<p class="fakeinput">Pretend Value</p>
javascript
document.getElementById("myText").disabled = true;
CSS
<INPUT NAME="realname" VALUE="Hi There" readonly>
<INPUT NAME="realname" VALUE="Hi There" disabled>
Given an html form like this:
<form action='/example/' id='example_form' method='POST' name='example_form'>
<fieldset>
<legend>Example form</legend>
<label for='age'>
Age
<input id='age' name='age' tabindex='1' type='text' />
</label>
<label for='gender'>
Gender
<select id='gender' name='gender' tabindex='2'>
<option disabled='disabled' id='gender' name='gender' value=''>Choose one:</option>
<option id='gender_female' name='gender' value='female'>Female</option>
<option id='gender_male' name='gender' value='male'>Male</option>
</select>
</label>
<label for='height'>
Height
<input id='height' name='height' size='3' tabindex='3' type='text' />
</label>
<label for='weight'>
Weight
<input id='weight' name='weight' size='4' tabindex='4' type='text' />
</label>
<input id='Save' tabindex='5' type='submit' value='Save' />
</fieldset>
</form>
How would you style it to get the classic table based layout of label to the left, field to the right, everything aligned vertically? Tables are obviously out of the question. I can't find anything on how to do this with implicit labels and just CSS.
If the answer is to not wrap the fields then so be it, but I'd prefer if a solution could be found for this as:
This is generated html.
I keep reading about how using implicit labels improves accessibility.
Any help/pointers/insight will be much appreciated.
Here are some basic stylings to get started
example jsfiddle
fieldset {width:300px;}
label {display:block;overflow:hidden;line-height:30px;}
label input, label select {float:right;}
input[type=submit] {float:right;width:100px;border:solid 1px;}
Or, depending on what you mean by 'vertically aligned', you could try this.
label {
display: block;
position:relative;
margin: 0 0 5px 0;
}
label > input,
label > select {
position: absolute;
left: 70px;
width: 100px;
}
jsfiddle here
or an alternative here
CSS will never cease to amaze me. Based on the answer of #magicalex I came up with the following:
label {
display: block;
position:relative;
text-align: right;
width: 100px;
margin: 0 0 5px 0;
}
label > input,
label > select,
input {
position: absolute;
left: 120px;
}
This manages to do most of what I had in mind, namely a horizontal layout with all the labels aligned to the right and all the fields aligned to the left, even if they were not the same width (which is unavoidable e.g. for iOS date pickers and the like).
However the JSFiddle illustrates the remaining problem of aligning a field if the label is broken into multiple lines (e.g. because of translations). But I guess this can be solved as well.