TEXTBOX에 CSS 활용하기

CSS 를 활용해 TEXTBOX들을 다른모양으로 꾸민 예제입니다.

어차피 같은 기능을 가지고 있는 TEXTBOX 들입니다.

 

 

 

1.

2.

3.

4.

5.

6.

7.

8. 단색 라인에 바탕색을 처리한것인데.. 붙여넣기가 다르게 들어오네요..^^;;

 

 

                                                                                                                                 

 

활용예제의 소스 -

 

 

1. <input type=text name="name" size="15">

2. <input type=text name="name" size="15" style="color:white; background-color=pink; padding-top:1px; border-width:1px; border-color:#ffffff; border-top-style:none; border-left-style:none; border-right-style:line;">
   

3. <input type=text name="name" size="15" style="color:black; background-color=white; padding-top:1px; border-width:1px; border-color:pink; border-top-style:none; border-left-style:none; border-right-style:none; border-bottom-style:dotted;">
   

4. <input type=text name="name" size="15" style="color:black; background-color=white; padding-top:2px; border-width:2px; border-color:pink; border-top-style:none; border-left-style:none; border-right-style:none; border-bottom-style:dotted;">
   

 

5. <input type=text name="name" size="15" style="color:black; background-color=white;padding-top:1px; border-width:1px; border-color:pink; border-top-style:none; border-left-style:none; border-right-style:none; border-bottom-style:line;">
   

6. <input type=text name="name" size="15" style="color:black; background-color=white; padding-top:2px; border-width:2px; border-color:pink; border-top-style:none; border-left-style:none; border-right-style:none; border-bottom-style:line;">
   

7. <input type=text name="name" size="10" style="color:yellow; background-color=white; padding-top:2px; border-width:2px; border-color:#55aaff; border-top-style:none; border-left-style:none; border-right-style:none; border-bottom-style:none;">

 

8. <input type=text name="name" size="10" style="border:1 solid #d7d7d7; background-color:#f4f4f4;">

 

 

테스트하신후 각 속성을 변환시켜보면 쉽게 소스를 파악할수 있습니다.

색상이나 사이즈를 수정하여 사용하세요~^_^