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>
Related
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">
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
I'm trying to properly add spacing between the s in my table contact form here: http://jsfiddle.net/k6XSp/1/.
I would like to have the fields on the right to line up with the width of the message box on the right side, thus meaning I need space added in between the s in each of the two s.
It is looking good, but I can't figure out how to space the right sides of the fields. Adding a margin-right seems to do the trick, but not very well, as it is very glitchy.
In addition, the form moves around when you click on the filed because the border shows up.
The CSS for the text fields looks like this:
#contact-area input, #contact-area textarea {
padding: 5px;
width: 451px;
font-family: Helvetica, sans-serif;
font-size: 1.4em;
margin: 0px 0px 10px 0px;
border: none;
background-color: #dedede;
height: 40px;
}
Take a look at this fiddle http://jsfiddle.net/k6XSp/6/. As suggested, try not to use tables to position elements. Use css instead.
<div class="control-group">
<label for="FirstName" class="text">First Name:</label>
<div class="control">
<input type="text" name="FirstName" id="FirstName" />
</div>
</div>
.control-group {width: auto; float: left; margin: 0 10px 0 0}
.control {display: block; clear: both;}
Forms use fieldset, legend and label tags, not tables, unless you need to code HTML from the 90's. The idea is to be semantically correct e.g. your HTML should reflect it's meaning/purpose.
<form action="contactengine.php" method="POST">
<fieldset>
<legend>personal data</legend>
<label for="firstname">First name</label>
<input id="firstname" placeholder="First name" />
</fieldset>
<input type="submit" value="submit my form" />
</form>
Spacing these fields is part of your markup => CSS.
See fiddle for a responsive/liquid (desktop, tablet, mobile) approach.
Note:
I see you use the 62.5% font base approach. We've tested with this on a big project and noticed IE has a floating point issue ending up with a different font-base than 10px. In my opinion just put it to 10px and be done with it => rem values can now be used in modern browsers.
I have the following static html file, where I'm spending time building a CMS web application site for our client.
http://cms.tmadev.com.au/usergroup.html
In middle section, there's a vertical array of checkboxes (which I css-styled it) and I followed numerous online tutorials, which lead me to use this site link.
http://csscheckbox.com/
I download the source code tutorial, understood it, copied the css code, tailor my changes as per my client requirements.
Everything looks perfectly fine - except when trying to check the checkbox.
NOTHING HAPPENS!
The checkbox doesn't get checked when clicked!
I couldn't figure out why it's not working as it's supposed to be like the tutorial.
Can someone please tell me what I did wrong?
Here's my code.
input[type=checkbox].input-checkbox{
width: 1px;
height: 1px;
position: absolute;
overflow: hidden;
clip: rect(0,0,0,0);
margin: -1px;
padding: 0;
border: 0;
}
input[type=checkbox].input-checkbox + label.input-label{
border: 2px solid #58585A;
display: inline-block;
width: 20px;
height: 20px;
line-height: 15px;
background-repeat: no-repeat;
font-size:15px;
vertical-align: middle;
cursor: pointer;
}
input[type=checkbox].input-checkbox:checked + label.input-label{
background-position: 0 -20px;
}
.input-label{
background-image: url('/images/tickbox.png');
}
Thanks very much!
The CSS is fine. Your problem is matching the label elements with the input elements.
This method relies on the fact that clicking the label toggles the checkbox. If the label isn't attatched to the checkbox it won't work. Match the value of each label's for attribute to the id of each checkbox.
For example:
<input type="checkbox" class="input-checkbox" id="checkbox1">
<label for="checkbox1" class="input-label"></label>
LIVE EXAMPLE HERE
The label elements in your HTML have the wrong value in their for attributes.
Each label must have a for attribute value exactly matching the id of the checkbox it is meant to activate.
The for attribute on your label needs to match the id of your input. This is working for me:
<div class="inputfield">
<input type="checkbox" class="input-checkbox" id="checkbox1">
<label for="checkbox1" class="input-label"></label>
</div>
Try this code
<label>
<input type="checkbox" class="input-checkbox" id="checkbox1" />
<span class="input-label">Your Label</span>
</label>
you have to change your label for id
here is working fiddle
i have change your this line
<label for="checkbox2" class="input-label"></label>
http://jsfiddle.net/jUa3P/146/
I am trying to create a search bar like Google's after the user begins to type in a keywords. I usually try to align the search bar with the submit button. If I can get it to line up correctly in Firefox, it usually won't line up correctly in Chrome. Is Google actually lining up the two inputs, or is there a way to put the actual button inside of the search bar and position it to the very right?
Edit: Well, I guess it is more of a conceptual question. I do not actually have any code. I just remember my last attempts to try to align the search bar and button failed horribly. How does Google align up their search box and submit button so well?
Edit 2:
Here is my HTML:
<form method="get" action="">
<div id="search-outer">
<input id="search-input" type="text" name="search" /><input id="search-submit" type="submit" value="Search" />
</div></form>
Here is my CSS:
#search-outer {
width: 600px;
margin: 0 0 10px 0;
}
#search-input {
margin: 0;
width: 400px;
font-size: 20px;
padding: 5px;
border: 1px solid #EEEEEE;
}
#search-submit {
margin: 0;
font-size: 20px;
padding: 5px;
border: 1px solid #EEEEEE;
}
They are still off a little bit. If I give them specific heights, then the button's position begins to be above the input's position.
If you want pixel-perfect control of two elements next to eachother, one approach I often find crossbrowser successful is to absolute position the right element, but use margins instead of top/left, like so:
<html>
<body>
<input/>
<input type="submit" style="position:absolute;margin:42px 0 0 10px;"/>
</body>
</html>
Using margins will position it relative to its position of orgin, which is on the right of the input field in this case. Using top/left would position it relative to its offset parent, which could be an ancestor element.
<form method="post" action="">
<div id="div">
<input type="text" />
<input type="submit" value="send" />
</div>
</form>
#div { width: 100px; margin: 0 auto; text-align: center;}
You'd generally surround both with a container and align to one edge of that. Remove (reset) margins to 0 to avoid browser-specific alignment issues.