Is it possible to change the properties of a text field when it's selected/active (i.e. being typed in). I'd like to simply change the border colour but I haven't found a thing about actually doing it.
I tried using :active but that only works when the mouse is pressed (obviously I guess)
the selector you want is called :focus
To change the border of an input field when it's selected/active, use :focus
Example below:
HTML:
<input type="text" id="ageField" name="age" />
CSS:
#ageField:focus {
border-color: #F00;
}
Explanation / Details
# W3Schools CSS:focus Selector
You are looking for the onFocus/onBlur HTML elements. With these you can use Javascript to modify the colors/style tags.
onFocus/onBlur tutorial
Related
Here's my input from a modal form
<input class="input-medium pull-left atcCode" type="text" id="atcCode" style="text-transform : none">
When I type on the input, it is all capitalized. And when I inspect element the code, style="text-transform : none" is gone.
<input class="input-medium pull-left atcCode" type="text" id="atcCode">
I also tried in CSS but also won't work.
.atcCode{
text-transform: none;
}
Thanks.
Try using '!important' like this:
.atcCode{
text-transform: none !important;
}
Then, hit Ctrl+F5 to refresh your css.
If it doesn't work try using Ctrl+F and search for the word capitalized or text-transform in both your css and the page itself, see if it's somewhere in your css that is giving the capitalization effect. Try remove the whole class in your input tag and see if it is still capitalized. If it doesn't, then the problem lie in the two other classes and you can check the two classes specifically to see where is / are the capitalization attribute in there.
Also search for #input to see if the input tag is being given an attribute to have its text all capitalized. Some outer tags that are surrounding your input tag might be causing this as well.
In your css the mistake is to use .atcCode instead of #atcCode
The point is for classes, hashtag is for id.
text-trasform:none
is the default value
use instead
text-transform:lowercase
First Name *
enter your first name
<p>
<label>Last Name *</label>
<label>enter your last name</label>
<input type = "text" name = "lastName" />
</p>
I want to color * as red without adding additional tag with it. I want this rule throughout document.
I want just like it.
Lasst Name *(with red color)
Thanks in advance
Simply put, this cannot be done with straight up CSS without changing the DOM, or the content of the first label.
One alternative would be to remove the asterisk * from the label then in your CSS do, e.g:
p label:first-child:after{
content:'*';
color:red;
}
Demo Fiddle
You can use pseudo elements after or before.
.lastName:after
{
content: '*';
color: red;
}
There is simply no way to do this without changing the DOM.
That being said, you don't necessarily have to add the tag when you create your html. So if the reason you don't want to change the html is that you do not control it, you can do what you need to do after the fact with javascript/jQuery.
I need to know how to make an empty-non-required input element invalid.
For example:
<input pattern="[0-9]+" title="" />
This field is :valid by default, as is not required. I need to turn it :invalid if it is empty.
Thank you all in advance. Cheers.
EDIT:
HTML:
<div>
<input type="text" name="Country" pattern="[a-zA-Z ]+" title="" placeholder="Country" />
Toggle
</div>
CSS:
input:valid + a
{
color: blue;
}
The <a> starts blue since there is no text inside the <input> which is not required.
The pseudo-class :valid state for an empty-non-required <input> element is true.
I need the <a> to remain uncolored when the <input> field is empty.
You need to add the attribute required, which has the same (limited, but growing) browser support as the pattern attribute. There is no way to make an “empty non-required” element invalid, because the required attribute means that the value must be non-empty.
The description of the pattern attribute in HTML5 CR says the attribute is used in constraint validation only if the value is not empty. This could also be said so that an empty string is always regarded as matching the pattern (but it really isn’t even checked against it).
This answer addresses the clarified/modified question, which seems to be about styling. An input element cannot match the selector :invalid if its value is empty, since such an element is exempted from constraint validation (as explained in my first answer). There is no selector for checking that the value of an input element is empty or non-empty. (The :empty pseudo-class tests for the content being empty, and an input element always has empty content.)
So this cannot be done in CSS (alone). You can use JavaScript e.g. so that any input operation causes the input element value to be checked. If the value is nonempty, put the input element to a class, say ok. Modify the CSS selector accordingly.
<style>
input:valid + a.ok {
color: blue;
}
</style>
<input ... oninput=check(this)>
...
<script>
function check(el) {
el.nextElementSibling.className = el.value ? 'ok' : '';
}
This works in sufficiently modern browsers. If wider browser coverage is needed, you may need to add event attributes like onkeypress and onpaste etc. that are used to run the same check. (And nextElementSibling might need to be replaced by some clumsier way of getting at the next element.)
Update, as per the comment below, you can simplify the code somewhat by setting the class on the input element rather than the a element. This means that the CSS selector would be input:valid.ok + a and the JavaScript assignment statement would have just el.className as the left-hand side. Regarding browser coverage, it’s probably not an issue here as compared with the basic restriction caused by the use of the :valid pseudo-class, which isn’t supported by IE 9 and earlier.
I'm trying to make a file sharing website but having trouble styling the upload forms I have as my design is quite advanced instead of setting the indivdual styles i'm trying to get set the design as a background image.
This is my design - http://icap.me/i/s5YIbheY3g.png
This is it currently effort - http://icap.me/i/ODuzJOQMhS.png
So far I set the style of the upload button by using the following code -
form input[type=submit] {
background : url("../img/upload.png") no-repeat center center;
width : 115px;
height :52px;
border : none;
color : transparent;
font-size : 0
}
do you know how I could use an image to style my other form buttons here is the html -
<form action="upload_file.php" method="post"enctype="multipart/form-data">
<input type="file" name="file" id="file" />
<br />
<input type="submit" name="submit" value="Submit" />
<input type="checkbox" name="vehicle" value="Bike">I agree to the terms and conditions<br>
</form>
Styling some form elements suck, and unfortunately, the file element is one of those elements. This is because the browser actually derives the control itself from the operating system (which means you have absolutely no control over how it looks). What this means for you is that in order to style it, you will need JavaScript and some CSS hackary.
Quirksmode has a great step by step for doing it, at least to get you started.
The basics of which, though, are:
Style your normal file input with position: relative.
Add a new plain old text input and position it on top of the file input.
Style the text input to look like the file input
Drop the file input's opacity to 0, so that it's invisible, but still clickable (this is key, because you're still actually using the file input)
Use JavaScript to put the filename into the text input
This one's kind of primitive and not very standards-compliant (extra elements and all that). If you're already using a JavaScript library (jQuery, MooTools, etc), you may be able to find a plugin that will handle the control itself, and you just add styling to that. The advantage to this method is that you won't necessarily need to add extra elements yourself (so you don't have a stray input field lying around), and the JavaScript (ideally) picks up the presence of your file input(s) and "fixes" them accordingly.
For styling browse button you need to take help of css-javascript duo or something like twitter bootstrap which just works out of the box1..
Also, check this post and this article
As a personal view, i feel that form elements like browse button and drop-down menus shouldn't be tweaked much..giving out two benefits..one, faster developments..and two, cross-browser symmetry..
is there any special input type in HTML that is designed to only display values, based on say, other input? When nobody is allowed to write into it. Or is a disabled text box the best option?
<input type="text" readonly />
The readonly attribute does your magic.
Nowadays its very easy to remove readonly attribute on browser. I suggested you to use label or span and write few lines of css codes for that label element to become look like input box.
<label>test value</label>
<style>
label {
padding:3px;
border:1px solid black;
width:200px;
}
</style>
use the readonly attribute, or use javascript to update the contents of a div
In HTML5 drafts, the output element exists for such purposes. I don’t think there’s much point in using it, though, since the same goal can be achieved in other ways.
In order to just display data, use any normal HTML element, like p or div or span.
If the data needs to be transmitted along the form data, put it into a hidden element, <input type=hidden>.
You can of course combine the two if needed: separately display the data and include it into the form data set.