Achieve special effects text input section with css or js

1 Default click on the text box effects:

Click the text box will appear peripheral shade of blue, cancel the special effects, adding css style for the text box "outline: none;", the abolition of the default effects.

2 Click Effects implement Baidu search box:

Click on the text box, the text box border appears solid blue line, I learned to implementation:

Basic html elements:

 

css: css to set the style for the needs of the special effects text box

js: When the mouse click on the text box, type the name of the text box change

 to sum up:

Js learned how to select html elements:

1 document.getElementById ( "id"); a return

2 document.getElementsByClassName ( "classname"); return an array of class

3document.querySelector ( "selector"); a return // querSelectorAll; returns an array

 

Learn css display property:

display: inline; row element does not wrap

display: block; block element, the width and height adjustable

display: inline-block; block within a row, has the advantages of both.

Write these, the equivalent of a record for me, if my representation is wrong, please exhibitions.

 

Guess you like

Origin www.cnblogs.com/Zxq-zn/p/11366744.html