Is there anyway to target specific input text elements in a form and reposition it, because it's letting me do things such as adjust padding, but I cannot reposition it by using margin. I also can't change the color, unless I do a style on the label. But doing a color on the label is useless because there's still the color in the input that I want to change. In short, I don't know how to override the original rule that I have for my input elements. Margins are not working either.
code:
input[type=text] {
width: 75%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block border: 1px solid #ccc;
border-radius: 4px;
color: #ffb3ec;
font-size: 24px;
box-sizing: border-box;
background-color: #4d4100;
}
.sample {
width: 30px;
background-color;
green;
}
<div class="mainBox">
<form>
<fieldset>
<label>placeholder:
<input type="text" id="placeholder" name="placeholder">
</label>
<br>
<label>Targets
<input type="text" class="sample" name="sample">
</label>
</fieldset>
</form>
</div>
You can wrap your input into a div element like below and reposition that:
<div class = "mainBox" >
<form>
<fieldset>
<div class = "wrapper">
<label> placeholder: </label>
<input type = "text" id = "placeholder" name = "placeholder" >
</div>
<br>
<div class = "wrapper">
<label> Targets </label>
<input type = "text" class = "sample" name = "sample" >
</div>
</fieldset>
</form>
</div>
I have rearranged the code a bit to fix the colour problem. It occurred, because you wrapped your input element inside the label. It doesn't work this way. Also remember to use for = "[THE ID OF YOUR INPUT ELEMENT]" to bind them together like so:
<label for = "sample"> Targets </label>
<input id = "sample" type = "text" class = "sample" name = "sample" >
In addition, before trying to play with top, bottom, left, right, paddings and margins always define the position of the element, because the default position is set to static, which means it isn't supposed to be moved.
position: static /* default, not supposed to be moved */
position: relative; /* to have move around its relative area */
position: absolute; /* to have move around based on the parent element */
position: fixed; /* to have move around based on the body of the document */
I need this "default text" in my CSS file, for example to an <input> tag and to a <textarea>,
so I search for something like:
<style>
testcss{
default:"DefaultText";
or
value:"DefaultText";
}
</style>
So, here is my question,
I have several <input> in my form, and I need to set them all "same default value"! for example same "placeholter" ou same "value" and, I need this by CSS <style>!
You can use javascript
var inputs = document.getElementsByTagName('input');
for (i = 0; i < inputs.length; i++) {
inputs[i].value = "Default Text";
}
Yes it is possible, with a <label> placed behind the input using z-index and a transparent background-color on the <input>. Use :focus to change to a white background. Use :valid :invalid that the placeholder don't shine through if text is entered. With .input:before your "styling" the content of the label. :first-line has sometimes some Firefox issues. With my Firefox for mac it worked with this code.
HTML
<label class="input"><input type="text" required="required"/></label>
CSS
.input {
color: gray;
display: block;
font-size: small;
padding-top: 3px;
position: relative;
text-indent: 5px;
}
input {
background-color: transparent;
left: 0;
position: absolute;
top: 0;
z-index: 1;
}
input:focus, input:first-line {
background-color: white;
}
.input:before {
content: "Some CSS Text";
}
input:valid { background-color:white; }
input:invalid{ background-color:transparent; }
Screenshot (chrome browser)
without Text
without text and focus
with text and focus
with text in it.
See https://jsfiddle.net/uueojg2g/1/ for testing.
Summary
Would I recommend using css for your task? Perhaps not, cause you should use css for presentation only. So I would always to try to get a html variant with placeholder
How it works with "pure" html
Preferred method, and works in all current browsers:
<input type="text" name="" placeholder="Full Name"/>
For IE9 and before, we just need some javascript:
<input type="text" name="" value="Full Name" onfocus="value=''" onblur="value='Full Name'"/>
Remember to use html for content and css for presentation.
So you could actually do that inside of inside of html input tag by using value attribute:
<input value="default text">
As for the text area, you put the default value in between the tags:
<textarea> default text </textarea>
You can use javascript or jquery to make it more convenient, like making the default text disappear when user clicks on textarea, or input element, but that is out of the scope of this question.
I am looking to try something like in the below link, however I want different images for each checkbox. Is there any way to do this? I have tried setting different classes for each item and just adding the class to the checkbox, but that doesnt seem to work...the default checkboxes just remain the same.
MY ATTEMPT:
https://jsfiddle.net/9qjj7012/
<div class="AccordionPanel" id="acc-step-3">
<div class="AccordionPanelTab">Step Three - Equipment Package</div>
<div class="AccordionPanelContent">
<div class="">
<input type="checkbox" name="equipment" value="speakers" id="equipment_0" class="speaker">
<input type="checkbox" name="equipment" value="subwoofer" id="equipment_1" class="subwoofer">
<input type="checkbox" name="equipment" value="smoke-machine" id="equipment_2" class="smokemachine">
<input type="checkbox" name="equipment" value="moving-head" id="equipment_3" class="movinghead">
</div>
<div class="form-gap"></div>
<input name="previous" id="acc-step-prev-3" type="button" class="form-btn form-prev" value="Previous">
<input name="next" id="acc-step-next-3" type="button" class="form-btn form-next" value="Next"><br>
<input name="reset" type="reset" class="form-btn form-reset" value="Reset">
</div>
</div>
EXAMPLE OF THE RESULT I WOULD LIKE:
http://codepen.io/jointmedias/pen/HqCJe (Except with individual images for each checkbox)
NEW JSFIDDLE: https://jsfiddle.net/9qjj7012/
What you're doing wrong, is that you're assigning a class to the checkbox, while the CSS rules in the example you refer to don't select the check box, they select the label. The checkbox is actually hidden, it's the label you are seeing.
Check this out:
http://codepen.io/DavidvanDriessche/pen/xVwJgd
In this example the labels have different classes and the css rules act upon that as follows:
For all checkboxes:
input[type=checkbox] {
display: none;
}
For all labels with class background1 that are following a checkbox:
input[type=checkbox] + label.background1 {
background: url("http://www.corporatecomplianceinsights.com/wp-content/uploads/2013/06/Facebook-thumbs-up.jpg") no-repeat;
}
For all labels with class background2 that are following a checkbox
input[type=checkbox] + label.background2 {
background: url("http://www.clker.com/cliparts/e/2/a/d/1206574733930851359Ryan_Taylor_Green_Tick.svg.med.png") no-repeat;
}
For all labels with a class attribute that begins with "background" and are following a checkbox:
input[type=checkbox] + label[class*="background"] {
background-size: 50%;
height: 250px;
width: 250px;
display: inline-block;
padding: 0 0 0 0px;
}
The only reason I'm working with that last rule is that it allows you to put all common formatting code into one CSS rule and you don't have to repeat it for each of the rules that target a specific background class, but that's a nicety you could forego if you want.
So far checkbox does not support background attribute. Luckily checkbox label also work as a clickable area for the assigned (for=checkboxId) checkbox. So the idea is to make a fake checkbox using label element and then change it's background value when checked.
input { display:none; } /* hide the checkbox. Label is our clickable area */
label { /* define the clickable area */
height: 150px;
width: 150px;
display: inline-block;
border: 2px solid;
}
/* set background image of the clicked area */
input[id=speakers]:checked + label {background: url('speakers.jpg');}
input[id=subwoofer]:checked + label {background: url('subwoofer.jpg');}
input[id=smoke-machine]:checked + label {background: url('smachine.jpg');
}
See Demo
The input element by default is size="20" if this is not defined inline or a CSS style rule is attributed to it.
How do you make the default the actual size of the value? For other elements:
<div style="display: inline; width: auto;">
The box will only fit the width of it's content
</div>
width: auto is all you need. I cannot put a defined width since the value may be longer. For example:
<input id="short" type="text" value="1000" />
<input id="long" type="text" value=" Areally long name is in this input field." />
I want #short to be the size of 1000 (essentially size="4" + the padding) but the #long to be as long as needed. These inputs are coming in programatically so I can't simply put a short class on the one's I want short and a long class on the one's I want long. I would really just like it if I could put:
input { width: auto; }
Anyway to do this?
The input element by default is size="20"
This "default size" depends on the browser, the version and your OS.
It is not possible to do this in inline styles.
the best solution is to set width and padding so it adds up to 100%
input {
width: 98%;
padding: 1%;
}
then set it to absolute left and right 0
<fieldset>
<input type="text" />
</fieldset>
finally add this css
<style type="text/css">
fieldset {
position: relative;
}
input {
position: absolute;
left: 0;
right: 0;
}
</style>
"How do you make the default the actual size of the value? (...) I would really just like it if I could put: input { width: auto; }
Anyway to do this?"
In an Input HTML Element, width is controlled by its size attribute. This is a quick way I use to simulate { width: auto; }, and it is browsers dependance proof:
Angular:
<input type="text" [size]="element.value.length + 1" #element>
Pure Vanilla JavaScript:
<input type="text" oninput="this.size = this.value.length + 1">
Assuming you have each input on its own row in the form, you can set size attribute to the desired size but also add a css of:
input[type="text"] {
max-width: 100%;
}
This ensures that the field does not overflow the form. This approach gives a visual cue of how much data is expected for short fields (because they will be the right size) while putting a cap on long ones.
Is it possible to disable form fields using CSS? I of course know about the attribute disabled, but is it possible to specify this in a CSS rule? Something like -
<input type="text" name="username" value="admin" >
<style type="text/css">
input[name=username] {
disabled: true; /* Does not work */
}
</style>
The reason I'm asking is that, I have an application where the form fields are autogenerated, and fields are hidden/shown based on some rules (which run in Javascript). Now I want to extend it to support disabling/enabling fields, but the way the rules are written to directly manipulate the style properties of the form fields. So now I have to extend the rule engine to change attributes as well as style of form fields and somehow it seems less than ideal.
It's very curious that you have visible and display properties in CSS but not enable/disable. Is there anything like it in the still-under-works HTML5 standard, or even something non-standard (browser specific)?
You can fake the disabled effect using CSS.
pointer-events:none;
You might also want to change colors etc.
This can be helpful:
<input type="text" name="username" value="admin" >
<style type="text/css">
input[name=username] {
pointer-events: none;
}
</style>
Update:
and if want to disable from tab index you can use it this way:
<input type="text" name="username" value="admin" tabindex="-1" >
<style type="text/css">
input[name=username] {
pointer-events: none;
}
</style>
Since the rules are running in JavaScript, why not disable them using javascript (or in my examples case, jQuery)?
$('#fieldId').attr('disabled', 'disabled'); //Disable
$('#fieldId').removeAttr('disabled'); //Enable
UPDATE
The attr function is no longer the primary approach to this, as was pointed out in the comments below. This is now done with the prop function.
$( "input" ).prop( "disabled", true ); //Disable
$( "input" ).prop( "disabled", false ); //Enable
It's very curious that you have visible and display properties in CSS but not enable/disable.
You're misunderstanding the purpose of CSS. CSS is not meant to change the behavior of form elements. It's meant to change their style only. Hiding a text field doesn't mean the text field is no longer there or that the browser won't send its data when you submit the form. All it does is hide it from the user's eyes.
To actually disable your fields, you must use the disabled attribute in HTML or the disabled DOM property in JavaScript.
You can't use CSS to disable Textbox.
solution would be HTML Attribute.
disabled="disabled"
The practical solution is to use CSS to actually hide the input.
To take this to its natural conclusion, you can write two html inputs for each actual input (one enabled, and one disabled) and then use javascript to control the CSS to show and hide them.
I am always using:
input.disabled {
pointer-events:none;
color:#AAA;
background:#F5F5F5;
}
and then applying the css class to the input field:
<input class="disabled" type="text" value="90" name="myinput" id="myinput">
first time answering something, and seemingly just a bit late...
I agree to do it by javascript, if you're already using it.
For a composite structure, like I usually use, I've made a css pseudo after element to block the elements from user interaction, and allow styling without having to manipulate the entire structure.
For Example:
<div id=test class=stdInput>
<label class=stdInputLabel for=selecterthingy>A label for this input</label>
<label class=selectWrapper>
<select id=selecterthingy>
<option selected disabled>Placeholder</option>
<option value=1>Option 1</option>
<option value=2>Option 2</option>
</select>
</label>
</div>
I can place a disabled class on the wrapping div
.disabled {
position : relative;
color : grey;
}
.disabled:after {
position :absolute;
left : 0;
top : 0;
width : 100%;
height : 100%;
content :' ';
}
This would grey text within the div and make it unusable to the user.
My example JSFiddle
input[name=username] {
disabled: true; /* Does not work */ }
I know this question is quite old but for other users who come across this problem, I suppose the easiest way to disable input is simply by ':disabled'
<input type="text" name="username" value="admin" disabled />
<style type="text/css">
input[name=username]:disabled {
opacity: 0.5 !important; /* Fade effect */
cursor: not-allowed; /* Cursor change to disabled state*/
}
</style>
In reality, if you have some script to disable the input dynamically/automatically with javascript or jquery that would automatically disable based on the condition you add.
In jQuery for Example:
if (condition) {
// Make this input prop disabled state
$('input').prop('disabled', true);
}
else {
// Do something else
}
Hope the answer in CSS helps.
You cannot do that I'm afraid, but you can do the following in jQuery, if you don't want to add the attributes to the fields. Just place this inside your <head></head> tag
$(document).ready(function(){
$(".inputClass").focus(function(){
$(this).blur();
});
});
If you are generating the fields in the DOM (with JS), you should do this instead:
$(document).ready(function(){
$(document).on("focus", ".inputClass", function(){
$(this).blur();
});
});
This can be done for a non-critical purpose by putting an overlay on top of your input element. Here's my example in pure HTML and CSS.
https://jsfiddle.net/1tL40L99/
<div id="container">
<input name="name" type="text" value="Text input here" />
<span id="overlay"></span>
</div>
<style>
#container {
width: 300px;
height: 50px;
position: relative;
}
#container input[type="text"] {
position: relative;
top: 15px;
z-index: 1;
width: 200px;
display: block;
margin: 0 auto;
}
#container #overlay {
width: 300px;
height: 50px;
position: absolute;
top: 0px;
left: 0px;
z-index: 2;
background: rgba(255,0,0, .5);
}
</style>
There's no way to use CSS for this purpose.
My advice is to include a javascript code where you assign or change the css class applied to the inputs.
Something like that :
function change_input() {
$('#id_input1')
.toggleClass('class_disabled')
.toggleClass('class_enabled');
$('.class_disabled').attr('disabled', '');
$('.class_enabled').removeAttr('disabled', '');
}
.class_disabled { background-color : #FF0000; }
.class_enabled { background-color : #00FF00; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form>
Input: <input id="id_input1" class="class_enabled" />
<input type="button" value="Toggle" onclick="change_input()";/>
</form>
A variation to the pointer-events: none; solution, which resolves the issue of the input still being accessible via it's labeled control or tabindex, is to wrap the input in a div, which is styled as a disabled text input, and setting input { visibility: hidden; } when the input is "disabled".
Ref: https://developer.mozilla.org/en-US/docs/Web/CSS/visibility#Values
div.dependant {
border: 0.1px solid rgb(170, 170, 170);
background-color: rgb(235,235,228);
box-sizing: border-box;
}
input[type="checkbox"]:not(:checked) ~ div.dependant:first-of-type {
display: inline-block;
}
input[type="checkbox"]:checked ~ div.dependant:first-of-type {
display: contents;
}
input[type="checkbox"]:not(:checked) ~ div.dependant:first-of-type > input {
visibility: hidden;
}
<form>
<label for="chk1">Enable textbox?</label>
<input id="chk1" type="checkbox" />
<br />
<label for="text1">Input textbox label</label>
<div class="dependant">
<input id="text1" type="text" />
</div>
</form>
The disabled styling applied in the snippet above is taken from the Chrome UI and may not be visually identical to disabled inputs on other browsers. Possibly it can be customised for individual browsers using engine-specific CSS extension -prefixes. Though at a glance, I don't think it could:
Microsoft CSS extensions, Mozilla CSS extensions, WebKit CSS extensions
It would seem far more sensible to introduce an additional value visibility: disabled or display: disabled or perhaps even appearance: disabled, given that visibility: hidden already affects the behavior of the applicable elements any associated control elements.