I was wondering if it is possible to apply styles to an empty textarea only. As a minimal example, I'd like a comments box that expands when the user clicks on it (:focus), but stays expanded when the user entered text, but re-collapse when the box is empty.
I have already tried :empty, but that doesn't work for inputs/textareas (only DOM elements).
#comments {
width: 150px;
height: 30px;
font-family: sans-serif;
border-radius: 5px;
outline:none;
-webkit-transition: all 1s;
-moz-transition: all 1s;
transition: all 1s;
}
#comments:not(:empty),
#comments:focus {
width: 250px;
height:100px;
border-radius: 10px;
}
<textarea type="text" id="comments" placeholder="Place a comment"></textarea>
Is there any way to make the input stay big when the user entered something in it?
From what I can see, :empty is still a working draft and may not be supported by the specific browser you are using.
A quick JavaScript solution would be to add/remove an HTML class based upon whether or not the textarea has a value.
.empty{/*styles go here*/}
And your JavaScript:
textareaElement.addEventListener('input',function(){
if(this.value && this.classList.contains("empty")) this.classList.remove("empty");
else this.classList.add("empty");
},false);
More info about Element.classList can be found on MDN.
Related
I have a login page with two fields:
<select id="operatore" name="operator">
<option disabled selected>Operator</option>
<option>John</option>
<option>Jennifer</option>
<option>Carl</option>
</select>
<input type="password" placeholder="Password" id="search_field" readonly>
I want that all the text appears centred. In Firefox all works fine. But in Chrome the written "Operator" appears on the left, even if the style inspector doesn't cancel the style, as you can see from the image:
In the native app for surf the net in Samsung Tablet, the written "Operator" appears centered, but the placeholder "password" appears on the left. Why? How can I fix all these problems?
HERE is the full CODE.
you can give it a text indent like text-indent: 40px;this won't make it aligned center but it will move it to the middle
and by the way there is a better way of making a placeholder for the select
<option style="display: none;" value="">Operator</option>
this way it won't show up in the drop-down
Taken from: Is it possible to center text in select box?
I'm afraid this isn't possible with plain CSS, and won't be possible to make completely cross-browser compatible.
However, using a jQuery plugin, you could style the dropdown:
http://filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select/
This plugin hides the select element, and creates span elements etc on the fly to display a custom drop down list style. I'm quite confident you'd be able to change the styles on the spans etc to center align the items.
Ok, I believe I have fixed your Operator problem.
Here is the slightly changed code.
form input {/*ADDED*/
width: 250px;
}
form input, #operatore {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: 0;
border: 1px solid rgba(255, 255, 255, 0.4);
background-color: rgba(255, 255, 255, 0.2);
border-radius: 3px;
padding: 10px 15px;
margin: 0 auto 10px auto;
padding-left: 90px;/*ADDED*/
padding-right: 80px;/*ADDED*/
/*TOOK AWAY width: 250px; PROPERTY*/
display: block;
text-align: center;
font-size: 18px;
color: white;
-webkit-transition-duration: 0.25s;
transition-duration: 0.25s;
font-weight: 300;
}
For some odd reason in Chrome the selector form input, #operatore is disabling any other changes made to (form) selector, option. Moreover if I were to add an extra selector, for example: #operatore {someCSS}, the (selector) form input, #operatore would STILL take precedence over that selector and I also used !important. Anyway you will have to align the text manually using padding-left and padding-right.
You can't really customise <select> or <option> much. The only way (cross-browser) would be to manually create a drop down with divs and css/js to create something similar.
I'm trying to implement an html control similar to the how search works in google chrome. I'm aware that in chrome it might not be built in html, but I'm trying to achieve the same functionality.
The way the search works is that adjacent to the text entered into the input, there's an extra text field that present the current index of a total number. It's also worth while noticing that the highlighted border is of the entire input (including the entered text and the index and sub total count). Also, when entering a long text, the index and sub total indicator (e.g. 0 of 10) doesn't get overridden, and the text itself scrolls.
Does anyone have any simple approach for implementing this feature set?
A simple aproach would be adding padding to the input, and positioning the text you want to keep over it. Rewriting the value of the input with pogramming.
HTML
<div class="form-text">
<input type=text placeholder="0 of 0" id="youridhere"/>
<label for="youridhere" class="static-value">Get this label to appear</label>
</div>
CSS
.form-text{
position:relative;
}
input{
padding:5px 5px 5px 150px;
}
.static-value{
position:absolute;
left:10px;
font-size:0.85em;
top:9px;
}
Pen of it working
This is the simplest solution, but you can find other better results and best practices using javascript. Wich I think would be something like detecting the pressed key and adding it the to string programatically instead of the standart browser behaviour.
I like this CSS based solution cause you can customize the fixed text, and don't need to change the standart behaviour of input fields.
-------- Edit --------
Actually, the best solution would be with the label element, with the for attribute, link it to the field. So when clicked it leads the user to the field. Edited.
I've made the foundation of it with only CSS, see the demo follows.
jsfiddle
* {
box-sizing: border-box;
}
div {
position: relative;
width: 10em;
}
input {
width: 100%;
padding: 4px;
border: 1px solid;
padding-right: 52px;
}
span {
display: block;
border-left: 1px solid;
width: 50px;
text-align: center;
position: absolute;
right: 0;
top: 2px;
}
<div><input type="text"><span>etc</span></div>
I got a small gap between two buttons and I can't deal with it, tried to look in browser terminal, but that didn't helped.
Here are the buttons:
<div class="secondTableVRow">
<input type="submit" name="submit" value="Submit" id="submit" onMouseOver="onSubmitHover()" onMouseOut="submitFadeOut()" onclick="submitForm()"/>
<input type="button" name="extend" value="Advanced" id="extend" onMouseOver="noteFade('extendNote')" onMouseOut="noteFadeOut('extendNote')" onClick="advancedOptions()" />
</div>
CSS:
.secondTableVRow{
width:318px;
background-color:green;
display:inline-block;
}
#submit{
cursor:pointer;
display:inline-block;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
width:156px;
height:35px;
outline:none;
border:none;
background-color:#DDDDDD;
-webkit-transition: background-color 0.4s linear 0s;
-moz-transition: background-color 0.4s linear 0s;
-o-transition: background-color 0.4s linear 0s;
transition: background-color 0.4s linear 0s;
}
Both buttons have same CSS, I know I should use class for that and I will, just want to fix this problem first. Live example of buttons: http://www.diligencehelps.com/php_includes/register_form.php
There seems to be a small gap after EVERY element in the form, why is that happening?If any more code needed just ask.
Try this:
<div class="secondTableVRow">
<input type="submit" name="submit" value="Submit" id="submit" onMouseOver="onSubmitHover()" onMouseOut="submitFadeOut()" onclick="submitForm()"/><!--
--><input type="button" name="extend" value="Advanced" id="extend" onMouseOver="noteFade('extendNote')" onMouseOut="noteFadeOut('extendNote')" onClick="advancedOptions()" />
</div>
HTML can be very picky about the whitespaces.
For more background information, check this out: http://css-tricks.com/fighting-the-space-between-inline-block-elements/
Add this:
.secondTableVRow:last-of-type {
font-size: 0;
}
#submit, #extend {
width: 159px;
}
The space is due to whitespace - HTML interprets linebreaks as whitespace. font-size: 0 takes care of that, but leaves some extra space on the right as #submit and #extend don't quite fill their parent .secondTableVRow container. You could also use width: 50% instead of 159px.
The :last-of-type is to avoid the font-size: 0 from being applied to the .secondTableVRow earlier in the markup, but you could just give that last one an ID (or additional class like .final instead and select it that way, e.g. .secondTableVRow.final { font-size: 0; }.
edit: as Hauke mentioned in the comments, this may be problematic in certain older browers. It also will not work with relative font sizing (e.g. ems or %) because the font size will cascade to descendant elements. You could instead just add float: left to both buttons and overflow: hidden to their container, or another clearfix method.
You could specify them as 50% width, as block elements (instead of inline-block, as this is more supported on older browsers anyway), and float them both left. Just be sure to place a after, so your formatting isn't botched.
Instead of labeling each field in a form, it is sometimes preferable (from a design standpoint) to have placeholder text in each field. For example, instead of having this:
----------------------------------
Full Name: | |
----------------------------------
you have this:
----------------------------------
| Full Name |
----------------------------------
The when you click in the field, the text disappears and you can write whatever you want. If you skip over the field without entering any text, then the placeholder reappears.
I've seen this done many ways, but all methods involve JavaScript. For example, Twitter does a decent job on their signup page but if Javascript is disabled you end up typing your name over the word 'Full name'.
I'm looking for a CSS-only method that would work even with JavaScript disabled. The only potential solution I've come up with is to set the background of the <input> tag to an image of the desired text and then use the input:focus pseudo-class to clear the background image when someone clicks on the text box. This seems to work but it would be nice not to have to use images.
Does anyone know of a good resource on how to do this?
This is the preferred method, and works in all current browsers:
<input type="text" name="" placeholder="Full Name"/>
This version works for IE9 and before:
<input type="text" name="" value="Full Name" onfocus="value=''" onblur="value='Full Name'"/>
You can do this with a <label> placed behind the index using z-index and a transparent background-color on the <input>. Use :focus to change to a white background.
:first-line has some Firefox issues.
Demo: http://jsfiddle.net/ThinkingStiff/bvJ43/
Note: See code-sushi's comment below for blur issues: Placeholder text in an input field with CSS only (no JavaScript)
Output:
HTML:
<label class="input">enter name<input /><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;
}
Try this:
HTML
<div>
<input type="text" id="text"></input>
<label for="text">required</label>
</div>
CSS
.text-wrapper {
position: relative;
}
.text-input-label {
position: absolute;
/* left and right properties are based on margin, border, outline and padding of the input text field */
left: 5px;
top: 3px;
color: #D1D1D1;
}
#text:focus + label {
display: none;
}
Working Fiddle
All of the presumably CSS-only answers above have neglected a critical component which is required in order to prevent the label acting as a pseudo-placeholder from "bleeding through" once the user is no longer focused on that particular field.
Hint:
input:valid { background-color:white; }
The pseudo-class :valid obtains whenever a field has any value other than ''. So when your user enters anything in the field of his or her own, the label displayed there will stop being displayed.
Be advised with <input type="email" /> fields, the pseudo-class :valid does and will actually require input of a valid email format (e.g. "xxxx#xxx.com" -- or .net or .org, etc.).
Full instructions how to do this here: http://css-tricks.com/float-labels-css/
Try this: it solves the overflowing placeholder and multi-input cases. The trick is to move the labels behind their inputs and reorder them visually.
You don't need an extra div to achieve what you want.
For some reason one of my inputs acts weird. I apply general css for all my inputs
.text-input {
padding: 6px 10px;
background: #fff;
border-radius: 5px;
-webkit-border-radius: 5px;
width: 330px;
border-bottom: 1px solid #000;
}
and I apply this specific css for one particular div to make it higher
#letter {
height: 100px;
}
For some reason when I focus on #letter input and start typing text appears in vertical middle of it, I don't know what is causing the problem, but here is my page, if you focus on "Message" input you will see what I mean (tested in chrome).
http://freshbeer.lv/development/en/contact.php
Perhaps you want to use a textarea instead? input type="text" is single line only.
You should use a Text Area element for that.
<textarea></textarea>