input[type=number] placeholder color in FF29+
It's apparently a bug:
- Firefox 29.0 the ::-moz-placeholder css pseudo-element selector is not honored for with type="number"
However, it seems to actually work for some users...
CSS to align label and input
This is one of those things which can be surprisingly tricky to get right.
Many people will suggest using float:left;
for this. Personally, I really dislike floats; they seem to cause more problems than they solve.
My preference is to use inline-block. This is a display method that combines inline properties (so you can easily align elements next to each other, etc) with block properties (such as being able to specify dimensions).
So the answer is simply to make them both display:inline-block;
and give the prompts a fixed width, which will make the input fields next to them line up.
You'll also need some sort of line feed or break after the input field, otherwise the next prompt will appear on the same line, which isn't the desired effect. The best way to achieve this is to put each prompt and its field into a container <div>
.
So your HTML will look like this:
<fieldset id="o-bs-sum-buginfo" class="myfields">
<div>
<label for="o-bs-sum-bug-ErrorPrefix">Error Prefix</label>
<input type="text" id="o-bs-sum-bug-ErrorPrefix" name="ErrorPrefix" value="" />
</div>
<div>
<label for="o-bs-sum-bug-ErrorNumber">Error Number</label>
<input type="text" id="o-bs-sum-bug-ErrorNumber" name="ErrorNumber" value="" />
</div>
....
</fieldset>
and your CSS will look like this:
.myfields label, .myfields input {
display:inline-block;
}
.myfields label {
width:200px; /* or whatever size you want them */
}
Hope that helps.
Edit:
you can use this plugin for setting the width of each label:
jQuery.fn.autoWidth = function(options)
{
var settings = {
limitWidth : false
}
if(options) {
jQuery.extend(settings, options);
};
var maxWidth = 0;
this.each(function(){
if ($(this).width() > maxWidth){
if(settings.limitWidth && maxWidth >= settings.limitWidth) {
maxWidth = settings.limitWidth;
} else {
maxWidth = $(this).width();
}
}
});
this.width(maxWidth);
}
from this page in a comment
and you use it this way:
$("div.myfields div label").autoWidth();
and thats all... all your labels are going to take the width of the longest label
How can I remove the No file chosen tooltip from a file input in Chrome?
This is a native part of the webkit browsers and you cannot remove it. You should think about a hacky solution like covering or hiding the file inputs.
A hacky solution:
input[type='file'] {
opacity:0
}
<div>
<input type='file'/>
<span id='val'></span>
<span id='button'>Select File</span>
</div>
$('#button').click(function(){
$("input[type='file']").trigger('click');
})
$("input[type='file']").change(function(){
$('#val').text(this.value.replace(/C:\\fakepath\\/i, ''))
})
Fiddle
How to automatically add placeholder attribute to html input type number in mvc 4?
Based on Pat Burke comment, I can use the UIHint data attribute combined with the good editor template.
Here is an example (Editor Template
):
@Html.TextBox("", ViewData.TemplateInfo.FormattedModelValue, new { @class = "text-box single-line", placeholder = ViewData.ModelMetadata.Watermark, type = "number" })
(the ViewModel
)
public class MiageQuotaRequestViewModel
{
[Required]
[UIHint("Number")]
[DataType(DataType.EmailAddress)]
[Display(Name = "Nombre de place demandées", Prompt = "Nombre de place")]
[Range(0, 50, ErrorMessage = "La demande doit être comprise entre 0 et 50 places")]
public int? RequestedQuota { get; set; }
}
and finally the result:
<input class="text-box single-line"
data-val="true"
data-val-number="The field Nombre de place demandées must be a number."
data-val-range="La demande doit être comprise entre 0 et 50 places"
data-val-range-max="50"
data-val-range-min="0"
data-val-required="Le champ Nombre de place demandées est requis."
id="RequestedQuota"
name="RequestedQuota"
placeholder="Nombre de place"
type="number"
value="">
targeting a specific browser with css
I am not sure whether that font family is supported by firefox or not but you can
Target only firefox using
@-moz-document url-prefix() {
h1 {
color: red;
}
}
See complete documentation here
You can target IE as
<!--[if IE]>
// Your css for IE or
// Perhaps importing a specific style sheet as
<link rel="stylesheet" type="text/css" href="ie9_and_below.css" />
<![endif]-->
target chrome only
@media screen and (-webkit-min-device-pixel-ratio:0) {
div{
color: red;
}
}
Related Topics
Set Textfield Height Material-Ui
CSS Positioning Elements Next to Each Other
Differencebetween Opacity and That Through Alpha Channel (Rgba)
Why Doesn't My Child Element Inherit Color from Its Parent When Parent Has More Specific Selector
How to Create a Concave Bottom Border in CSS
Cross-Browser Support of 'Page-Break-Inside: Avoid;'
Apply Style to First Element in a Row of Similar Elements
Need CSS Text Color for A:Hover to Take Precedence Over A:Visited
Understrap Child-Theme Edit Not Visible, SASS Color Variable Not Applied
Styled-Components VS SASS (Scss) or Less
Hide All Elements Except One Div for Print View
Bootstrap Cards with 100% Height and Margin Bottom
Remove Underline Only from Anchor Element Child
Twitter Bootstrap - Border Pushing Contents Down
Hyperlinks Showing Url with Blueprint
Sidemenu Background-Color in Ionic-V4
How to Draw a Trapezoid-Like Card
Is the 'Frosted Glass' Effect Implementable with CSS Only at This Time