I have been checking similar questions in Stackoverflow, but I can't find the proper way to do this:
I want an input without border. When focused, border is blue. Also, when not focused but with text added inside it, border should be blue as well.
I am trying with .Input:focus, .Input:not(:focus):valid {}, with no result: the rule is triggered when the inut is not focused or with text, I add an example:
.Input {
border: none;
outline: none;
}
.Input:focus,
.Input:not(:focus):valid {
border: 2px solid blue;
}
<input class="Input" type="text" name="EMAIL" id="email" placeholder="email">
Any idea will be welcome!
This should work for you:
.Input[value=""], .Input:placeholder-shown {
border: none;
outline: none;
}
.Input, .Input:focus {
border: 2px solid blue;
}
By default, the input field will always have a blue border. The two selectors above it, however, will determine whether to show the border or not.
If the input field has an empty value, or if the placeholder text is displaying, then the border will be removed and the field will have no decoration. Otherwise, if the input doesn't match any of this criteria, it will have a blue border.
The :focus attribute is used to ensure that the field will have a blue border when it is selected but doesn't contain any text, or when it only contains placeholder text.
Hope this helps!
:valid works when the content of the input passes all validation rules placed on it. In your case, since it is an email, you can change the type from text to email. Any text entered into the input that doesn't match the default HTML Email pattern won't trigger the :valid pseudo class.
In order for your input to be "invalid" when it is empty you can add required to your input. Since it is defaulted to being empty it will not be valid as it is required.
.Input {
border: none;
outline: none;
}
.Input:focus,
.Input:not(:focus):valid {
border: 2px solid blue;
}
<input class="Input" type="email" required name="EMAIL" id="email" placeholder="email">
Additionally you can use the pattern attribute which accepts a Javascript regex string to validate your input on. For example purposes only you can use a pattern like [a-z0-9._%+-]+#[a-z0-9.-]+\.[a-z]{2,3}$. By default the input is empty and is invalid. Same goes for any string that doesn't match something#something.com or something123#something123.eu as examples.
.Input {
border: none;
outline: none;
}
.Input:focus,
.Input:not(:focus):valid {
border: 2px solid blue;
}
<input class="Input" type="email" pattern="[a-z0-9._%+-]+#[a-z0-9.-]+\.[a-z]{2,3}$" required name="EMAIL" id="email" placeholder="email">
Related
Is there a way to allow user to search placeholder text using the "find in page" browser function?
I understand I can just add elements with zero height that contain placeholder text, but that seems like a hacky solution.
Perhaps something using CSS pseudoclasses?
edit: I should mention, so far this is only an issue on Chrome for iOS(10.0.2)
the code is very simple:
<input type="text" placeholder="First Name">
Here's the screenshot of Chrome:
This is what I get when I search for 'first'
input {
font-size: 1.5rem;
margin: 10px;
padding: 10px;
width: 65%;
}
input:placeholder-shown {
border: 5px solid red;
}
<form>
<input type="text" placeholder="Placeholder text" value="Currently has a value (not showing placeholder).">
<input type="text" placeholder="Currently has no value (showing placeholder).">
</form>
This is my HTML code :
<input type="text" placeholder="Email address" style="width:290px;border-radius:5px;">
Pretty straightforward HTML code. Here is the JFiddle:
https://jsfiddle.net/tLfpjL4a/
As you can see, part of the top is dark for some reason, not sure why.
I tried the following css features :
border-style and border-color
But it hasn't really worked
That's because you didn't specifiy the full range of border options. Just add border-style: solid and you have a flat border.
You need to override the border style:
.input-block-level {
border: none;
}
jsFiddle Demo
If you prefer to use inline styles, simply add border: none to your code:
<input type="text" class="input-block-level" placeholder="Email address" style="width:290px;border-radius:5px;border:none" />
Use border: none;:
input {
border: none;
}
JSFiddle.
CSS border property on MDN.
Border property just note that it will take away all borders so you might want to set the properties else it will end up blank.So maybe something like this.
<input type="text" class="input-block-level" placeholder="Email address" style="width:290px;border-radius:5px;border: 1px solid #B5B6B7;padding: 5px" />
I added padding just because it makes the input box look a littler nicer and UI friendly for users
fiddle: https://jsfiddle.net/tLfpjL4a/5/
If you want, adding this:
* {
outline: none;
}
Will remove that default browser outline that gets shown when things are active and selected on focus
You could try using the following CSS property for the input field.
border-style: none
you can use:
border: 0;
border: none
border:1px solid white;
JSFIDDLE DEMO
you have use class with border none.
.input-block-level
{
border:none;
}
input {
background: white;
color: white;
}
input:in-range {
background: green;
color: white;
}
input:out-of-range {
background: red;
color: white;
}
<h3> CSS range validation </h3>
Enter your age
<input type="number" min="1" max="100">
Aim:
white for out-of-range (default case)
green for in-range
red for out-of-range
In the above snippet, how can one make
input {
background: white;
color: white;
}
work for just input regardless of in-range or out-of-range?
It seems like the :in-range and :out-of-range pseudo-classes work similar to the :valid and the :invalid pseudo-selectors. When this is applied, the input always seems to be in of the two states and because of it the default selector never gets applied. A blank value is also getting treated as in the range (though it shouldn't be). The selectors spec doesn't seem to mention a handling for this case.
Ideally, I would recommend adding a default value for the field (like value="0") because it is anyway a mandatory field for you. But, if you feel that the default red background affects your UX in a bad way then have a look at the below workaround.
Adding required attribute to the input (because it is anyway mandatory) and using it along with the :valid and :invalid pseudo-selectors seem to produce the required output.
input:invalid - Applied for default scenario or blank value because field is required and so a blank value means invalid.
input:in-range:valid - Any value that is in range and is valid would meet this selector.
input:out-of-range:invalid - Any value that is out of range and invalid only because it is out of range will match this selector and so red color would come only when the value is out of range.
Note to future readers: This is also not very correct because if I am a user, I would expect a blank value for a required field also to be invalid and have a red background. So, this may not be a suitable workaround for you. Please validate and use accordingly.
input:invalid {
background: white;
color: white;
}
input:in-range:valid {
background: green;
color: white;
}
input:out-of-range:invalid {
background: red;
color: white;
}
<h3> CSS range validation </h3>
Enter your age
<input type="number" min="1" max="100" required>
CSS cannot check whether or not a text box is empty under the conditions you are looking for. Below is a better approach to the solution, however your solution will require JavaScript. Please see this thread.
Try adding a class where the styles are only applied if the classes are on the element.
CSS
input[type="number"] {
background: white;
color: black;
}
input[type="number"].validate:in-range {
background: green;
color: white;
}
input[type="number"].validate:out-of-range {
background: red;
color: white;
}
HTML
<h3> CSS range validation </h3>
Enter your age
<input class="validate" type="number" min="1" max="100">
<h3> NO CSS range validation </h3>
Enter your age
<input type="number" min="1" max="100">
I need create input which has 2 colors in a placeholder.
and here is solution which works well in Chrome.
http://jsfiddle.net/vmuJm/
html
<input placeholder="Name" class="required" />
css
.required::-webkit-input-placeholder:after {
content:'*';
color: red;
}
.required:-moz-placeholder:after {
/* Firefox 18- */
content:'*';
color: red;
}
.required::-moz-placeholder:after {
/* Firefox 19+ */
content:'*';
color: red;
}
.required:-ms-input-placeholder:after {
content:'*';
color: red;
}
But my current FF 29.0.1 doesn't show content from :after, so this solution doesn't work. Is there any other way to get 2 colors in one placeholder with css and html?
Chrome:
FF:
Here is a cross-browser solution that does not use Javascript:
Live demo
Inline elements such input do not support :before and :after. To make things even harder the placeholder selector and their pseudo-classes are not fully supported by all browsers, as you found out.
So, the workaround is to add a label placed relatively on top of the input box with a for attribute pointing to the input text box. This way, when user clicks the label (fake placeholder) the focus goes into the input box underneath.
Replace your class="required" by the attribute required="required". This gives you an opportunity to use the :invalid and :valid selectors, and also lets the browser display a validation error, when the form is submitted with empty required fields.
input {
width: 160px;
}
input[type=submit] {
width: auto;
}
input[required]+label {
color: #999;
font-family: Arial;
font-size: .8em;
position: relative;
left: -166px;
/* the negative of the input width */
}
input[required]+label:after {
content: '*';
color: red;
}
/* show the placeholder when input has no content (no content = invalid) */
input[required]:invalid+label {
display: inline-block;
}
/* hide the placeholder when input has some text typed in */
input[required]:valid+label {
display: none;
}
<form>
<input type="text" id="name" name="name" required="required" />
<label for="name">Name</label>
<br/>
<input type="email" id="email" name="email" placeholder="Email" />
<br/>
<input type="submit" />
</form>
Since the email is not required, leave the native placeholder there, and just to this hack for the name.
I also changed your email from type="text" to type="email" for better user experience on mobile devices.
Inspired by Jose's solution, without using "required" attribute, the live demo also can do what you want.
Key point is css has :not selector, refer to Mozilla website
Same question is asked here
Basically the answer is no. Depends on the browser.
:before and :after can not be used on some elements such as <input>. It Depends on the browser though, as it seems like chrome can do it.
Maybe it can be solved using JavaScript? I don't know
Please how can i make the submit button and reset button have a different border apart from the input tags
HTML
<input typ="image" name="submit" value=" " scr="image.png">
<input type="image" name="reset" value=" " scr="reset.png" >
CSS
input, textarea, select {
border: 2px solid red;
}
I have tried to add another selector with the name submit and reset but both of them still get the values from the input tags border.
input[type=image] or give them a class name or give them an id, name is not used for css
Write:
id="submit"
In the input tag of the submit button, and then in the CSS, type:
#submit
{
border: 1px solid black; /* as an example */
}