So I have a website with a form with multiple number input boxes that I have adjusted the size of in the style sheet, but what I want is for each number box to have its own width in pixels. I could not find anything on individually changing the width of the boxes since input type number does not listen to the width parameter. Is there a way to make the width in pixels different for each number input box? Or do I have to change them to text input and write a JavaScript function to only accept numbers?
Since your question is very broad, I put together a fiddle showing the 3 common ways I select input elements on "my" pages, this is highly opinionated so there will be multiple different answers, see fiddle: https://jsfiddle.net/5f3pbg8b/3/
And as a quick reference, w3fools has a good list of selectors http://www.w3schools.com/cssref/css_selectors.asp
html example 1
<h4>
With classes best option
</h4>
<input type="text" class="input1"/>
<input type="text" class="input2"/>
<input type="text" class="input3"/>
<input type="text" class="input4"/>
<input type="text" class="input5"/>
CSS example 1
.input1{width: 50px; background: yellow;}
.input2{width: 100px; background: yellow;}
.input3{width: 150px; background: yellow;}
.input4{width: 200px; background: yellow;}
.input5{width: 250px; background: yellow;}
HTML example 2
<h4>
With placeholder value
</h4>
<input type="text" placeholder="input1"/>
<input type="text" placeholder="input2"/>
<input type="text" placeholder="input3"/>
<input type="text" placeholder="input4"/>
<input type="text" placeholder="input5"/>
CSS example 2
input[placeholder="input1"]{width: 50px; background: blue;}
input[placeholder="input2"]{width: 100px; background: blue;}
input[placeholder="input3"]{width: 150px; background: blue;}
input[placeholder="input4"]{width: 200px; background: blue;}
input[placeholder="input5"]{width: 250px; background: blue;}
HTML example 3
<h4>
With nth-child selector
</h4>
<input type="text"/>
<input type="text"/>
<input type="text"/>
<input type="text"/>
<input type="text"/>
CSS example 3
input:nth-child(14) {
width: 50px;
background: #ff0000;
}
input:nth-child(15) {
width: 100px;
background: #ff0000;
}
input:nth-child(16) {
width: 150px;
background: #ff0000;
}
input:nth-child(17) {
width: 200px;
background: #ff0000;
}
input:nth-child(18) {
width: 250px;
background: #ff0000;
}
You can set the width to a number input field. If you want to individually set input boxes it's good to give them ids like that:
<input id="two" type="number"/>
If you want to select a certain n-th input box you can use a css selector like this:
input[type="number"]:nth-child(3)
If you want to see all this in action check out this JSFiddle.
Related
Now my form looks like this:
When you click on the send button, if any input is not filled in, then this exclamation mark should come out exactly under the input that is not filled in as here:
Self written verification is not suitable I need to use Parsley
parsely already adds parsley-error class (and style it with red border, background etc.)
If the task is to add the exclamation mark, depends on your design, there are some ways to do it, but I prefer the css only approach.
For doing this, you need to change the html a bit. For every input, this is the html
<span class="input-wrapper">
<input type="text" class="form-control" name="fullname" required="" data-parsley-errors-messages-disabled="" />
<span class="validation"></span>
</span>
The .validation is holds the exclamation mark, and the .input-wrapper is the positioning container (because .validation has position: absolute
And here is the result
$('#demo-form').parsley()
.on('form:submit', function() {
return false; // Don't submit form for this demo
});
.input-wrapper {
position: relative;
display: inline-block;
}
.validation {
position: absolute;
pointer-events: none;
color: red;
top: 0;
right: 5px;
height: 100%;
display: inline-flex;
align-items: center;
display: none;
}
.validation:before {
content: "!";
}
.parsley-error~.validation {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://parsleyjs.org/dist/parsley.min.js"></script>
<link href="https://cdn.jsdelivr.net/gh/guillaumepotier/Parsley.js#2.9.2/src/parsley.css" rel="stylesheet" />
<form id="demo-form" data-parsley-validate="">
<label for="fullname">Full Name * :</label>
<span class="input-wrapper">
<input type="text" class="form-control" name="fullname" required="" data-parsley-errors-messages-disabled="" />
<span class="validation"></span>
</span>
<button>Submit</button>
</form>
If your design / html is different than the example, the code above might should be adjusted.
I got this range input in my Ionic Mobile App:
<input class="clear-all" type="range" name="strange" on-release="updateContent()" ng-model="rangeDefault" min="1" max="{{rangesCount}}" value="1" step="1" ng-disabled="isDisabled()">
With this CSS applied to it:
.custom-range input[type='range']::-webkit-slider-thumb {
width: 20%;
/*display: none;*/
height: 1.6vh;
background: rgb(255,255,255);
box-shadow: 0px 0px 0px 2px rgba(0, 0, 0, 1);
margin-top: -3px;
border-radius: 5px;
}
Depending on an option I want to hide the thumb but keeping the track. If I comment out display: none; it works. I get range input without the thumb. But I want to do it dynamically based on user interaction.
I really don't know how to interact with input on CSS. I'm using angularJS and javascript but no JQuery (I'll keep it away from my project as long as I can) so I'm looking for a pure js solution.
I read this, this and this among others solution. I'm able to hide the input but not the track or thumb separately.
So I assume .custom-range will be on a parent element right? If so the code could look like this:
<div class='custom-range'>
<input class="clear-all" type="range" name="strange" on-release="updateContent()" ng-model="rangeDefault" min="1" max="{{rangesCount}}" value="1" step="1" ng-disabled="isDisabled()">
</div>
You could use ng-class to add a class to div.custom-range dynamically:
<div class='custom-range' ng-class="{'disabled-range':isDisabled()}">
....
</div>
and add a bit of css:
.custom-range.disabled-range input[type='range']::-webkit-slider-thumb {
display: none;
}
Haven't tested this .. but I hope it's clear enough.
Original Design:
Desired Design:
I want to have a Textbox having Predefined characters SD and users can add another characters or numbers. But SD cannot be deleted nor edited. Is it possible?
Thanks in Advance
You can work around like this
<div style="position:relative">
<input type="text" style="padding-left:25px" />
<span style="position: absolute; padding: 3px 0; left: 5px">SD</span>
</div>
don't forget to change the padding and left values to suit your font and size.
You can experiment a bit with two inputs and removed left / right borders. A quick solution I just created may look like this:
CSS:
input {
border: 1px solid black;
}
input[readonly] {
border-right: 0;
width: 20px;
}
input:not([readonly]) {
border-left: 0;
}
HTML:
<input type="text" value="SD" readonly="readonly"><input type="number" value="123">
Demo: http://dabblet.com/gist/9593231
It is up to you to adapt this to your overall design.
I'm building a form manager for my framework and want to add methods to create form elements based on parameters passed. Each "element container" has the following:
A validation row positioned at the top of the container. This row is turned off by default (display: none) and will only show if a javascript validation error occured.
A label container (situated on the left)
A form control container (situated on the right)
Here is a sample HTML:
<div class='control_container'>
<div class='validation'></div>
<div class='label_container'>
<label for=''>Label</label>
</div>
<div class='elements_container'>
<div class='element'>
<input type='text' name='' value='' />
</div>
</div>
</div>
My issue here is that I need to the control_container to seperate label and elements containers but also need the label_container and element_container to both have the same height irrespective of the content. These 2 containers may have different background colours so I need to ensure that the stretch to the bottom of the control_container and also keep in consideration that the validation div might show (so using position: absolute and top: 0 might not work).
I have tried the following:
Giving control_container a relative position and the 2 seperate containers both a position absolute. As the height of the containers would mostly be dictated by the height of the label (if the label is multiple lines or if the element_container has multiple elements within it this option does not work.
Floats (There I say more? :D)
I would prefer a CSS solution which is compatible with most browsers (including IE8 (am I pushing it to ask for IE7 haha)
Any ideas?
** ADDITIONAL INFORMATION **
I want the layout to look something like this:
--------------------- control_container ---------------------
[Potential validation message (this will be toggled on/off) ]
[label_container][ elements_container ]
------------------- end of control_container ----------------
So label_container (with the label) and elements_container (with it's elements) will be next to eachother. These 2 containers may have different background colours so they should both stretch (height) according to the biggest element. The only issue I see here is validation element which wont show by default so using absolute positioning might not work as the validation message might take the top area and have the elements overlap eachother.
HTML:
<div class="controls">
<div class="message">Test</div>
<div class="label_container">
<label for="">Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label </label>
</div>
<div class="elements_container">
<div class="element">
<input type="text" name="test" value="" />
</div>
</div>
</div>
CSS:
.controls {
position: relative;
display: table;
width: 100%;
}
.controls .message {
background: red;
padding: 5px;
color: #FFF;
font-weight: bold;
height: 30px;
width: 100%;
display: table-caption;
box-sizing: border-box;
}
.controls .label_container {
display: table-cell;
background: #D3D3D3;
width: 150px;
height: 100%;
margin-top: 30px;
}
.controls .elements_container {
display: table-cell;
background: #A2A7DD;
color: #000;
width: 650px;
height: 100%;
margin-top: 30px;
margin-left: 150px;
}
All of them here in jsFiddle: Demo
I have a great bit of code that sets the label to 0.5 opacity when the input field is on focus. Now, I'd like to set this to 0 (100% invisibility) if possible.
Can someone help out with this?
Here's my fiddle: http://jsfiddle.net/d8Apy/5/
My HTML:
<div class="fieldgroup">
<label for="name">Name</label>
<input type="text" id="name" name="name">
</div><!--/.fieldgroup-->
My CSS:
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-family: Arial;
}
.fieldgroup {
position: relative;
}
input[type='text'],
label {
padding: 5px;
font-size: 16px;
line-height: 16px;
margin: 0;
height: 30px;
color: #fff;
display: block;
}
input[type='text'] {
border: none;
background: green;
}
I am using this jQuery plugin: http://fuelyourcoding.com/in-field-labels/
Many thanks for any pointers :-)
There is a line of code in the in-field-labels code that says...
$.InFieldLabels.defaultOptions={fadeOpacity:0.5,fadeDuration:300,labelClass:'infield'};
Change this to...
$.InFieldLabels.defaultOptions={fadeOpacity:0.0,fadeDuration:300,labelClass:'infield'};
fadeOpacity:0.5 to fadeOpacity:0.0
When you apply the plugin to your lables you can set the opacity by passing in an options object like so:
$("label").inFieldLabels({ fadeOpacity:0.0 });
Javascript
$(document).ready(function() {
$("#name").focus(function(){
$('#lblname').css({'opacity':'0'});
});
});
EDIT for fade effect
$(document).ready(function() {
$("#name").focus(function(){
$("#lblname").animate({ 'opacity':'0'},350);
});
});
HTML
<div class="fieldgroup">
<label for="name" id="lblname">Name</label>
<input type="text" id="name" name="name">
</div><!--/.fieldgroup-->
There is an html property called placeholder that does that. I'm not sure however that you can apply a fade effect to it. edit: It might be possible with css transitions and this: Change an HTML5 input's placeholder color with CSS, but it's rather horrible.
<input type="text" name="fname" placeholder="First name">
input[name:fname]:active {
color: green
}
While not implemented by every plugin developer, good practice advocates a plugin accepting an options object. While not terribly clear, you are able to override the fadeOpacity and fadeDuration options.
To solve your issue, simply pass in an options object that specifies the fadeOpacity like so:
$(document).ready(function(){
$('label').inFieldLabels({fadeOpacity: 0.0});
});