In Internet Explorer-10;
When i "text-align" right to any input type textbox.
The visibility of last digit gets bad.
This is bug in IE-10 rendering following solution is given
::-ms-clear {
display: none;
}
As i am not familiar much with CSS; i do not know how to implement "two colon class" on particular input type.
Could any one help me out?
1) How to mention ::-ms-clear in INLINE STYLES?
2) How to make class of above one and implement on particular code?
Following is HTML Code:
<input type="text" value="" data-require-number="true" id="belop">
You can use like this for input type text as a class, and you can't use this in inline style.
input[type=text]::-ms-clear{
display: none;
}
Update :-
css -
.className::-ms-clear{
display: none;
}
html -
<input type="text" value="" data-require-number="true" id="belop" class="className">
Related
My question: Does the checkbox offer a pattern? If so, what is it?
The following is intended for additional context, as the community is willing to offer peripheral answers as well.
HTML input elements can accept a pattern, which comes in handy for 'real-time' error reporting. Say an input field has a pattern [a-z], any input with numbers will be marked with the invalid pseudo class.
I am unable to have a checkbox respond in the same manner.
I understand that sources (https://www.w3schools.com/tags/att_input_pattern.asp, as well as people in the comments) claim the pattern match is run after form submission, this does not seem to be the actual behavior. Here is an example of how the input's invalid is applied before the form is submitted: https://jsfiddle.net/kshe57ou/
I'm attempting to alter styles of my form based upon this pseudo class, and was hoping there was a way to style the checkbox as well, whether or not checkbox inputs had a pattern attribute.
You can still style a checkbox with the :invalid when it is required.
input[type="checkbox"]:required:invalid {
outline: 1px solid red;
}
input[type="checkbox"]:required:valid {
outline: 1px solid green;
}
<form>
<input type="checkbox" required />
<input type="submit">
</form>
Typically most people would style the label
input[type="checkbox"]:required:invalid + label {
color: red;
}
input[type="checkbox"]:required:valid + label {
color: green;
}
<form>
<input type="checkbox" required id="terms"/>
<label for="terms">I accept the terms</label>
<input type="submit">
</form>
Looks like the pattern attribute is unavailable for radio buttons and check boxes.
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern
It's not enough to read the spec, we must thoroughly read it.
I am trying to make the following selector work with my HTML:
input[type="submit"][value=" "]:not(.unwantedIconClass)/*, thisIsAComment*/
It will not work unless I replace value with actual text (and have the same text in the HTML, of course).
I have tried \007C\00a0\00a0 following advice from nbsp not working in CSS content tag but it does not seem to work either and makes Eclipse syntax coloring confused.
What I actually want is for the value to be invisible to the user but selectable using CSS. It does not matter what the value actually is.
This is because I do not have control about the input tag, only its value attribute.
Any suggestions ?
EDIT -- Since it is part of the problem, I will explain more:
The value of my value attribute is actually generated through a custom JSP tag, and that custom JSP tag is enclosed by a layout:submit attribute (Struts Layout).
<layout:submit
styleClass="tooCommonClass"
reqCode="notAReliableIdentifierEither">
<customTag:message key="keyToPropertyFile" />
</layout:submit>
Just use the empty string for value.
input[type="submit"][value=""] {
background-color: orange;
}
input[type="submit"][value="_"] {
background-color: purple;
font-size: 0;
color: transparent;
}
<input type="submit" value="" />
<input type="submit" value="Submit" />
<input type="submit" value="_" />
<datalist> is an HTML5 tag which is use in order to order elements and choose them. when i use it with <input>, it gives me this.
i dont want to see list items like that before i typed it on, so can i eliminate this down button on it. is there an attribute for this?
ALSO can i use it other tags than <input>
NO is not an answer for this question!
To remove the down arrow, try using the following in your CSS:
input::-webkit-calendar-picker-indicator {
display: none;
}
Example http://jsfiddle.net/5UYdy/
Unfortunately, there is no selector which does it.
BUT!
You can add required attribute to the <input> tag. Then, we can access this input by CSS3 tags:
input:valid - when input has content
input:invalid - when input is blank
Adding following style:
input:invalid::-webkit-calendar-picker-indicator {
display: none;
}
will show the list only when the input is not empty.
The following JSFiddle shows that in action, hope it helps:
http://jsfiddle.net/5UYdy/2/
The only disadvantage is that the input is required.
And no, you can't use it with other elements, according to W3Schools
The tag specifies a list of pre-defined options for an element.
This will remove history of an input box but...,
<input type="text" autocomplete="off"/>
but I think there is no way to remove <datalist>
your best bet is this:
input::-webkit-calendar-picker-indicator {
opacity: 0;
}
<div class="form-field__control">
<input
type="text"
list="currency"
id="currency"
/>
<datalist id="currency">
<option>Dollars</option>
<option>Pounds</option>
<option>Naira</option>
<option>Peso</option>
</datalist>
</div>
I see all over the web two ways that people code checkboxes, which one is correct?
<input id="a" type="checkbox"/><label for="a">checkbox</label>
<label for="b"><input id="b" type="checkbox">checkbox</label>
They both work fine in Chrome, is one more cross browser than the other? Is there any difference?
DEMO
Both are perfectly correct, valid and accessible as long as you associate input and label with for/id attributes, even when the input is right into the label` (see the best answer to the question linked by #AramKocharyan and my comment there)
Screen readers will read the associated label content when its user focus on a form element (input, select or textarea). When in a form, chances are they'll only read labels, legends and buttons (I mean reset, submit, image or button) because JAWS and alike have special modes; roughly the aim is to fill a form, not to read the content as with the rest of a web page.
You'll often find forms with a label on the left, input on center and some help on the right:
E-mail [ ] ex: johndoe#domain.com
With an input outside the label element, the hint will be coded with a span for example. It won't be heard by screen readers because it's not part of a label or submit button.
With an input inside a label element, you can put both the label and the hint into the label element:
<label for="email">
<strong>E-mail</strong>
<input type="text" id="email" name="whatever"> <!-- HTML4.01 doctype -->
<span>ex: johndoe#domain.com</span>
</label>
That way, the hint will be read to the AT user along with the real label.
Note: of course you'll style the strong and span differently, say resp. bold right-aligned and italic left-aligned. span isn't necessary for styling (just style label and cancel half of rules for strong) but it's more simple (simpler?) :)
It's as useful for errors as for hints:
<p class="error>
<label for="email">
<strong>E-mail</strong>
<input type="text" id="email" name="whatever" value="aaa"> <!-- HTML4.01 doctype -->
<span>ERROR: not a valid e-mail address. Example of a valid e-mail: johndoe#domain.com</span>
</label>
</p>
.error strong {
color: red;
font-weight: bold;
}
.error input {
border: 1px solid red;
}
.error span {
color: red;
}
That way, the error is read to screen readers (and color that they can't see or barely see isn't the only way of conveying information to them with the help of this text).
Either is correct.
Labels may contain inline elements (except other labels). Input elements are inline elements.
imho below:
Anyhow, I would not put the checkbox inside the label since it seems kinda weird to me. Labels are meant to label the input fields, hold a description, not to contain them.
I'm building an autosuggest search, like apple's spotlight... and want to disable the browser from offering text suggestions under the input box. I can't remember if that's an html or css setting and can't find it.
Anyone remember?
The attribute:
<form autocomplete="off">
is, I think, what you're looking for.
html attribute:
autocomplete="off"
To disable auto-completion of input fields, use the HTML attribute autocomplete with a value set to off.
<... autocomplete="off" .../>
This doesn't work in modern browsers. Use:
<div contenteditable="true"></div>
If you need pleaceholder add css:
[contenteditable="true"][placeholder]:after {
content: attr(placeholder);
color: #abb4cd;
}
[contenteditable="true"][placeholder]:not(:empty):after {
display: none;
}