input text 自动换行css; textarea

  • The <input> element is used to select user information.
  • <input type=text> is single line by definition

An <input> element can vary in many ways, depending on the type attribute. An <input> element can be of type text field, checkbox, password, radio button, submit button, and more.

  • The <textarea> tag defines a multi-line text input control.

A text area can hold an unlimited number of characters, and the text renders in a fixed-width font (usually Courier). The size of a text area can be specified by the cols and rows attributes, or even better; through CSS‘ height and width properties.

textarea{overflow-y:auto;padding:0;width:100px;height:100px;border:1px solid gray;}时:
全部为w:100px h:100px
这个textarea很混乱。但是设置了padding:0和border:1px solid gray后就全部都统一了。

The wrap options are the most tricky part of text areas. If you turn wrap off the text is handled as one long sequence of text without linebreaks. If you set it to virtual the text appears on your page as if it recognized linebreaks – but when the form is submitted the linebreaks are turned off. If you set it to physical the text is submitted exactly as it appears on the screen – linebreaks included.


如当<input type=”text” id=”input1″ value=”asdfasdfsdafsdfa132423″> 值长度超过5个,就实现自动换行

solution: input不能自动换行,但可以试CSS,根据宽度换行, style=”word-break:break-all”

<textarea id=”TextArea1″ cols=”5″ rows=”2″></textarea>

word-break: normal|break-all|hyphenate;

Allow long words to be able to break and wrap onto the next line:

Value Description
normal Breaks non-CJK scripts according to their own rules
break-all Lines may break between any two characters for non-CJK scripts
hyphenate Words may be broken at an appropriate hyphenation point

input text换行了,你就看不到上一行了

HTML5 placeholder text

There is a new attribute as part of HTML5 forms called placeholder. It shows faded gray text in the textarea (also works for text-style inputs) which disappears when the textarea is in focus or has any value.

<textarea placeholder="Remember, be nice!" cols="30" rows="5"></textarea>

All WebKit browsers, Firefox 3.6, and Opera 10 all put a glowing blue border around textareas when they are in focus. You can remove it from the WebKit browsers like this:

textarea {
  outline: none;

REMINDER: The blue glow is becoming a strong standard and breaking that standard is typically a bad thing for your users. If you do it, you should have a darn compelling reason to as well as a similarly strong :focus style.

Add resize handle

jQuery UI has a resizeable interaction that can be used on textareas. It works in all browsers and overrides the WebKit native version, because this version has all kinds of fancy stuff (like callbacks and animation).

To use it, load jQuery and jQuery UI on your page and at its most basic level you call it like this:


Auto-resize to fit content

James Padolsey has a super nice jQuery script for auto resizing textareas. It works just how you likely hope it does. The textarea starts out a normal reasonable size. As you type more and more content, the textarea expands to include all of that text, rather than triggering a scrollbar as is the default.

The plugin has a variety of options, but at its simplest you just load jQuery, the plugin file, and call it like this:



If you want to be able to type into textareas and would rather lines do not break until you press return/enter (a horizontal scrollbar is triggered instead), you’ll have to use the wrap="off" attribute.
<textarea wrap=”off” cols=”30″ rows=”5″></textarea>
#whatever { white-space: nowrap; }.

Remove default scrollbars in Internet Explorer

IE puts a vertical scrollbar by default on all textareas. You can hid it with overflow: hidden, but then you don’t get any scrollbars at all when you expand. Thankfully auto overflow works to remove the scrollbar but still put them back when needed.

textarea {
  overflow: auto;

placeholder css snippet


customize placeholder color:

Placeholder text in inputs has (in the browsers implementing it so far) a light gray color. To style it, you’ll need vendor prefix CSS properties.

::-webkit-input-placeholder { color: red; } :-moz-placeholder { /* Firefox 18- */ color: red; } ::-moz-placeholder { /* Firefox 19+ */ color: red; } :-ms-input-placeholder { color: red; }

/* custom placeholder color */
input::-webkit-input-placeholder {
color: rgba(255,255,255,0.8);

input:active::-webkit-input-placeholder ,
input:focus::-webkit-input-placeholder {
color: rgba(255,255,255,0.2);

input::-moz-placeholder {
color: rgba(255,255,255,0.8);

input:focus::-moz-placeholder {
color: rgba(255,255,255,0.2);

input:-ms-input-placeholder {
color: rgba(255,255,255,0.8);

input:active::-ms-input-placeholder ,
input:focus::-ms-input-placeholder {
color: rgba(255,255,255,0.2);

border: 10px solid rgba(0,0,0,0.3); box-shadow

border: 10px solid rgba(0,0,0,0.3);

The properties that can be set, are (in order):

  • border-width,
  • border-style, and
  • border-color.

It does not matter if one of the values above are missing, e.g. border:solid #ff0000; is allowed.


Value Description Play it
none Specifies no border Play it »
hidden The same as “none”, except in border conflict resolution for table elements Play it »
dotted Specifies a dotted border Play it »
dashed Specifies a dashed border Play it »
solid Specifies a solid border Play it »
double Specifies a double border Play it »
groove Specifies a 3D grooved border. The effect depends on the border-color value Play it »
ridge Specifies a 3D ridged border. The effect depends on the border-color value Play it »
inset Specifies a 3D inset border. The effect depends on the border-color value Play it »
outset Specifies a 3D outset border. The effect depends on the border-color value Play it »
inherit Specifies that the border style should be inherited from the parent element
  • border-style:dotted solid double dashed;
    • top border is dotted
    • right border is solid
    • bottom border is double
    • left border is dashed
  • border-style:dotted solid double;
    • top border is dotted
    • right and left borders are solid
    • bottom border is double
  • border-style:dotted solid;
    • top and bottom borders are dotted
    • right and left borders are solid
  • border-style:dotted;
    • all four borders are dotted

color: #b14943;
cursor: pointer;
border-bottom: 1px dashed #b14943;


box-shadow:1px 1px 3px rgba(0,0,0,0.6);

box-shadow: h-shadow v-shadow blur spread color inset;

  • The horizontal offset of the shadow, positive means the shadow will be on the right of the box, a negative offset will put the shadow on the left of the box.
  • The vertical offset of the shadow, a negative one means the box-shadow will be above the box, a positive one means the shadow will be below the box.
  • The blur radius (optional), if set to 0 the shadow will be sharp, the higher the number, the more blurred it will be.
  • The spread radius (optional), positive values increase the size of the shadow, negative values decrease the size. Default is 0 (the shadow is same size as blur).
  • Color

Inner Shadow

.shadow {
   -moz-box-shadow:    inset 0 0 10px #000000;
   -webkit-box-shadow: inset 0 0 10px #000000;
   box-shadow:         inset 0 0 10px #000000;

One-Side Only

Using a negative spread radius, you can get squeeze in a box shadow and only push it off one edge of a box.

.one-edge-shadow {
	-webkit-box-shadow: 0 8px 6px -6px black;
	   -moz-box-shadow: 0 8px 6px -6px black;
	        box-shadow: 0 8px 6px -6px black;

overflow: hidden

four values for the overflow property: visible (default)hiddenscroll, and auto.

Generally, you shouldn’t be setting static heights on boxes with web text in them anyway, so it shouldn’t come up.


literally hides any content that extends beyond the box.

This is particularly useful in use with dynamic content and the possibility of an overflow causing serious layout problems. However, bear in mind that content that is hidden in this way is utterly inaccessible (short of viewing the source).


Setting the overflow value of a box to scroll will hide the content from rendering outside the box, but will offer scrollbars to scroll the interior of the box to view the content.

Of note with this value is that you get BOTH horizontal and vertical scrollbars no matter what, even if the content requires only one or the other.


Auto overflow is very similar to the scroll value, only it solves the problem of getting scrollbars when you don’t need them.

Float Clearing

One more popular uses of setting overflow, strangely enough, is float clearing. Setting overflow doesn’t clear the float at the element, it self-clears. This means that the element with overflow applied (auto or hidden), will extend as large as it needs to encompass child elements inside that are floated (instead of collapsing), assuming that the height isn’t declared. Like this:


Collapsing margins


The A stands for Alpha, which refers to the level of opacity of the colour, or to put it another way, the amount of transparency.

This means that we can set not only the red, green and blue values, but also control how much of what’s behind the colour shows through.

CSS3 introduces a couple of new ways to specify colours, and one of those is RGBA:

  • opacity level from 0 (completely transparent) to 1 (completely opaque).
  • first three values are red, green and blue. You can specify these 0-255 or 0%-100%.
h1 {
	color: rgb(0, 0, 0);
	background-color: rgb(255, 255, 255);

Heading with no transparency

Heading with 50% opacity on the element
h1 {
	color: rgb(0, 0, 0);
	background-color: rgb(255, 255, 255);
	opacity: 0.5;
Heading with 50% opacity

50% opacity on just the background colour

h1 {
	color: rgb(0, 0, 0);
	background-color: rgba(255, 255, 255, 0.5);
Heading with 50% opacity on just the background

50% opacity on just the foreground colour

h1 {
	color: rgba(0, 0, 0, 0.5);
	background-color: rgb(255, 255, 255);
Heading with 50% opacity on just the foreground

.classA.classB 和.classA .ClassB的区别

Difference between .classA.classB and .classA .classB in CSS?

.classA.classB refers to an element that has both classes A and B (class="classA classB"); whereas .classA .classB refers to an element with class="classB" descended from an element with class="classA".

.classA .classB {
  border: 1px solid; }

It would work, for example, on:

<div class="classA">
  <p class="classB">asdf</p>

This one, however, targets any type of element that is both class “classA”, as well as class “classB”. This type of style is less frequently seen, but still useful in some circumstances.

.classA.classB {
  border: 1px solid; }

This would apply to this example:

<p class="classA classB">asdf</p>

However, it would have no effect on the following:

<p class="classA">fail</p>
<p class="classB">fail</p>

Note that when an HTML element has multiple classes, they are separated by spaces.

.classa.classb {
border: 1px solid blue ;
.classa   .classb {
border: 1px solid black ;

<input class=”classa classb” type=”text” />

<div class=”classa”><input class=”classb” type=”text” /></div>


在 CSS 中,类选择器以一个点号显示:

.center {text-align: center}



.classA .classB指的是classB内嵌于classA





ID and Class Selector

As we covered above, you can target elements by a combination of ID and class.

<h1 id="one" class="two">This Should Be Red</h1>
#one.two { color: red; }

Double Class Selector

Target an element that has all of multiple classes. Shown below with two classes, but not limited to two.

<h1 class="three four">Double Class</h1>
.three.four { color: red; }


We aren’t limited to only two here, we can combine as many classes and IDs into a single selector as we want. { color: red; }

Although bear in mind that’s getting a little ridiculous =)


Merge two css class for div element

Here ‘ClassA > div’ and ‘classB > div’ have the same properties. So i need to make this as single class to apply to div element.

.classA {
 height: 500px;
 width: 800px;
.classB {
 height: 800px;
.classB > div {
.classA > div {
Use a comma:

.classA > div, .classB > div {

z-index property css


div { z-index: 1; /* integer */ }

Property Values

Value Description Play it
auto Sets the stack order equal to its parents. This is default Play it »
number Sets the stack order of the element. Negative numbers are allowed Play it »
inherit Specifies that the z-index should be inherited from the parent element

controls the vertical stacking order of elements that overlap.

z-index only effects elements that have a position value other than static (the default).

Negative margin has pulled the element over another. Absolutely positioned elements overlap each other.

Without any z-index value, elements stack in the order that they appear in the DOM (the lowest one down at the same hierarchy level appears on top).

Elements with non-static positioning will always appear on top of elements with default static positioning.

Also note that nesting plays a big role. If an element B sits on top of element A, a child element of element A can never be higher than element B.

Note that older version of IE get this context stuff a bit screwed up. Here’s a jQuery fix for that

$(function() { var zIndexNumber = 1000; // Put your target element(s) in the selector below!

$(“div”).each(function() { $(this).css(‘zIndex’, zIndexNumber);

zIndexNumber -= 10; }); });

Display: None;

.hide { display: none; } //content “inaccessible” by screen readers.

Hiding an Element – display:none or visibility:hidden

Hiding an element can be done by setting the display property to “none” or the visibility property to “hidden”. However, notice that these two methods produce different results:

  • visibility:hidden hides an element, but it will still take up the same space as before. The element will be hidden, but still affect the layout.
  • display:none hides an element, and it will not take up any space. The element will be hidden, and the page will be displayed as if the element is not there


Floats property- [CSS]


images may be set into the page such that text wraps around them as needed. This is commonly and appropriately called “text wrap”. Here is an example of that.

Absolutely positioned page elements will not affect the position of other elements and other elements will not affect them, whether they touch each other or not.

wrapping text around images, floats can be used to create entire web layouts.

Floats are also helpful for layout in smaller instances. Take for example this little area of a web page. If we use float for our little avatar image, when that image changes size the text in the box will reflow to accommodate:

This same layout could be accomplished using relative positioning on container and absolute positioning on the avatar as well. In doing it this way, the text would be unaffected by the avatar and not be able to reflow on a size change.

Clearing the Float

Float’s sister property is clear. An element that has the clear property set on it will not move up adjacent to the float like the float desires, but will move itself down past the float. Again an illustration probably does more good than words do.

In the above example, the sidebar is floated to the right and is shorter than the main content area. The footer then is required to jump up into that available space as is required by the float. To fix this problem, the footer can be cleared to ensure it stays beneath both floated columns.

#footer {
   clear: both;			

Clear has four valid values as well.

  • Both is most commonly used, which clears floats coming from either direction.
  • Left and Right can be used to only clear the float from one direction respectively.
  • None is the default, which is typically unnecessary unless removing a clear value from a cascade.
  • Inherit would be the fifth, but is strangely not supported in Internet Explorer. Clearing only the left or right float, while less commonly seen in the wild, definitely has its uses.

The Great Collapse

One of the more bewildering things about working with floats is how they can affect the element that contains them (their “parent” element). If this parent element contained nothing but floated elements, the height of it would literally collapse to nothing. This isn’t always obvious if the parent doesn’t contain any visually noticeable background, but it is important to be aware of.

As anti-intuitive as collapsing seems to be, the alternative is worse. Consider this scenario:

If the block element on top were to have automatically expanded to accomodate the floated element, we would have an unnatural spacing break in the flow of text between paragraphs, with no practical way of fixing it. If this were the case, us designers would be complaining much harder about this behavior than we do about collapsing.

Collapsing almost always needs to be dealt with to prevent strange layout and cross-browser problems. We fix it by clearing the float after the floated elements in the container but before the close of the container.

Techniques for Clearing Floats

If you are in a situation where you always know what the succeeding element is going to be, you can apply the clear: both; value to that element and go about your business. This is ideal as it requires no fancy hacks and no additional elements making it perfectly semantic. Of course things don’t typically work out that way and we need to have more float-clearing tools in our toolbox.

  • The Empty Div Method is, quite literally, an empty div. <div style="clear: both;"></div>. Sometimes you’ll see a <br /> element or some other random element used, but div is the most common because it has no brower default styling, doesn’t have any special function, and is unlikely to be generically styled with CSS. This method is scorned by semantic purists since its presence has no contexual meaning at all to the page and is there purely for presentation. Of course in the strictest sense they are right, but it gets the job done right and doesn’t hurt anybody.
  • The Overflow Method relies on setting the overflow CSS property on a parent element. If this property is set to auto or hidden on the parent element, the parent will expand to contain the floats, effectively clearing it for succeeding elements. This method can be beautifully semantic as it may not require an additional elements. However if you find yourself adding a new div just to apply this, it is equally as unsemantic as the empty div method and less adaptable. Also bear in mind that the overflow property isn’t specifically for clearing floats. Be careful not to hide content or trigger unwanted scrollbars.
  • The Easy Clearing Method uses a clever CSS pseudo selector (:after) to clear floats. Rather than setting the overflow on the parent, you apply an additional class like “clearfix” to it. Then apply this CSS:
    .clearfix:after { 
       content: "."; 
       visibility: hidden; 
       display: block; 
       height: 0; 
       clear: both;

    This will apply a small bit of content, hidden from view, after the parent element which clears the float. This isn’t quite the whole story, as additional code needs to be used to accomodate for older browsers.

Different scenarios call for different float clearning methods. Take for example a grid of blocks, each of different types.

To better visually connect the similar blocks, we want to start a new row as we please, in this case when the color changes. We could use either the overflow or easy clearing method if each of the color groups had a parent element. Or, we use the empty div method in between each group. Three wrapping divs that didn’t previously exist or three after divs that didn’t previously exist. I’ll let you decide which is better.

Problems with Floats

Floats often get beat on for being fragile. The majority of this fragility comes from IE 6 and the slew of float-related bugs it has. As more and more designers are dropping support for IE 6, you may not care, but for the folks that do care here is a quick rundown.

  • Pushdown is a symptom of an element inside a floated item being wider than the float itself(typically an image). Most browsers will render the image outside the float, but not have the part sticking out affect other layout. IE will expand the float to contain the image, often drastically affecting layout. A common example is an image sticking out of the main content push the sidebar down below.

    Quick fix: Make sure you don’t have any images that do this, use overflow: hidden to cut off excess.

  • Double Margin Bug – Another thing to remember when dealing with IE 6 is that if you apply a margin in the same direction as the float, it will double the marginQuick fix: set display: inlineon the float, and don’t worry it will remain a block-level element.
  • The 3px Jog is when text that is up next to a floated element is mysteriously kicked away by 3px like a weird forcefield around the float. Quick fix: set a width or height on the affected text.
  • In IE 7, the Bottom Margin Bug is when if a floated parent has floated children inside it, bottom margin on those children is ignored by the parent. Quick fix: using bottom padding on the parent instead.


If you need text wrapping around images, there really aren’t any alternatives for float. Speaking of which, check out this rather clever technique for wrapping text around irregular shapes. But for page layout, there definitely are choices. Eric Sol right here on A List Apart has an article on Faux Absolute Positioning, which is a very interesting technique that in many ways combines the flexibility of floats with the strength of absolute positioning. CSS3 has the Template Layout Module that, when widely adopted, will prove to be the page layout technique of choice.

circular lense

border-radius, which is supported by the modern versions of all web-browsers (no IE lower than version 9).

If you have this in your javascript

    width: 150, // width of magnifier
    height: 150, // height of magnifier
    loupe: 'loupe' // css class for magnifier

Just put this in your css:

.loupe {
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
border-radius: 150px;
The CSS3 border-radius property allows web developers to easily utilise rounder corners in their design elements, without the need for corner images or the use of multiple div tags, and is perhaps one of the most talked about aspects of CSS3.

Rounder corners can be created independently using the four individual border-*-radius properties (border-bottom-left-radius, border-top-left-radius, etc.) or for all four corners simultaneously using the border-radius shorthand property.

Here’s a few basic examples that should work in current versions of Firefox, Safari/Chrome, Opera and even IE9:


#Example_A {

height: 65px;

-moz-border-radius-bottomright: 50px;
border-bottom-right-radius: 50px;
}#Example_B {
height: 65px;
-moz-border-radius-bottomright: 50px 25px;
border-bottom-right-radius: 50px 25px;

#Example_C {
height: 65px;
-moz-border-radius-bottomright: 25px 50px;
border-bottom-right-radius: 25px 50px;

#Example_D {
height: 5em;
width: 12em;
-moz-border-radius: 1em 4em 1em 4em;
border-radius: 1em 4em 1em 4em;

#Example_E {
height: 65px;
-moz-border-radius: 25px 10px / 10px 25px;
border-radius: 25px 10px / 10px 25px;

#Example_F {
height: 70px;
width: 70px;
-moz-border-radius: 35px;
border-radius: 35px;





当然有的会这样来写list-style-type:none, 这种写法特别是在一些CMS中最常见。

<style type=”text/css”>
3、 在li,ul内加入list-style。如<ul style=”list-style-type:none><li><a herf=”″>我的博客</a></li>&lt; /ul> 当然这种是很麻烦的了。

  • none不使用项目符号
  • disc实心圆,默认值
  • circle空心圆
  • square实心方块
  • decimal阿拉伯数字
  • lower-roman小写罗马数字
  • upper-roman大写罗马数字
  • lower-alpha小写英文字母
  • upper-alpha大写英文字母


 A).运用CSS格式化列表符: ul li{

B).如果你想将列表符换成图像,则: ul li{
list-style-image: url(images/icon.gif);
C).为了左对齐,可以用如下代码: ul{
D).如果想给列表加背景色,可以用如下代码: ul{
list-style-type: none;
ul li{
E).如果想给列表加MOUSEOVER背景变色效果,可以用如下代码: ul{ list-style-type: none; margin:0px; }
ul li a{ display:block; width: 100%; background:#ccc; }
ul li a:hover{ background:#999; }


F).LI中的元素水平排列,关键FLOAT:LEFT: ul{
ul li{

<LI> 的参数设定(常用):
例如: <li type=”square” value=”4″>
只适用于非顺序清单,设定符号款式,其值有三种,如下,内定为 type=”disc”:
符号 是当 type=”disc” 时的列项符号。
符号 if” width=10 height=10 border=0> 是当 type=”circle” 时的列项符号。
符号 是当 type=”square” 时的列项符号。
只适用于顺序清单,设定该一项的数目,其後各项将以此作为起始数目而递增,但前面各项则不受影响,其值只能是 1,2,3.. 等整数,没有内定值。
<UL> 的参数设定(常用):
例如: <UL type=”square”>

设定符号款式,其值有三种,如下,内定为 type=”disc”:
符号 是当 type=”disc” 时的列项符号。
符号 是当 type=”circle” 时的列项符号。
符号 是当 type=”square” 时的列项符号。

<li>是 list item 即列表项,但列表有很两种,所以外面得有 <ul> 或者 <ol> 用来区别无序列表(小点点)和有序列表(1,2,3…)。



Just another site

Jing's Blog

Just another site

Start from here......







Just another site

Where On Earth Is Waldo?

A Project By Melanie Coles

the Serious Computer Vision Blog

A blog about computer vision and serious stuff

Cauthy's Blog

paper review...

Cornell Computer Vision Seminar Blog

Blog for CS 7670 - Special Topics in Computer Vision


Life through nerd-colored glasses

Luciana Haill

Brainwaves Augmenting Consciousness



Dr Paul Tennent

and the university of nottingham

turn off the lights, please

A bunch of random, thinned and stateless thoughts around the Web

John's Weblog

Just another weblog

I Am That I Am

Chasing tomorrow's sunrise.