2. <input type="text" name="" size="40" value="Readonly (입력불가)" readonly>
3. <input type="text" name="" size="40" value="Disabled (작동불가)" disabled>
4. <input type="text" name="" size="40" value="입력폰트 설정" style="font-size:12pt; color:#ff0000; font-weight:bold;">
5. <input type="text" name="" size="40" value="테두리 0px 로 설정" style="border: 0px;">
6. <input type="text" name="" size="40" value="테두리 1px 로 설정" style="border: 1px solid #ff0000;">
7. <input type="text" name="" size="40" value="테두리 4개 각각 설정" style="border-right: #ff0000 1px solid; border-left: #00ff00 1px solid; border-top: #ffff00 1px solid; border-bottom: #0000ff 1px solid;">
8. <input type="text" name="" size="40" value="배경색 회색으로 설정" style="background-color: #e2e2e2;">
9. <input type="text" name="" size="40" value="입력값 오른쪽 정렬" style="text-align: right;">
10. <input type="text" name="" size="40" value="크기 강제 조정" style="height:30px; width:200px">
11. <input type="text" name="" size="40" value="패딩주기(상:5,우:0,하:0,좌:10)" style="padding:5px 0px 0px 10px;">
<html>
<head>
<title>input에 CSS로 Style(스타일)을 주자!</title>
<style>
img,input{ vertical-align:middle; }
#counsel p{ margin-bottom:10px; }
#input_text{
width:290px; height:51px;
background:url('input_bg.jpg') no-repeat;
border:none;
padding:15px;
font-size:16px;
color:#aaa;
}
</style>
</head>
<body>
<h1>input type="text" CSS로 스타일(style) 주기(2)</h1>
<div class="counsel">
<p><label for="useId">이름</label><input type="text" id="useId" class="input_text" /></p>
<p><label for="useCompany">업체명</label><input type="text" id="useCompany" class="input_text" /></p>
<p><label for="useEmail">이메일</lable><input type="text" id="useEmail" class="input_text" /></p>
<p><label for="usePhone">연락처</label><input type="text" id="usePhone" class="input_text" /></p>
</div>
</body>
<html>
'study' 카테고리의 다른 글
| HTTP REFER (0) | 2013.08.14 |
|---|---|
| request.servervariables (0) | 2013.07.16 |
| qqq (0) | 2012.12.31 |
| zzzzzz (0) | 2012.10.01 |
| 자동 가입 방지 폼 구현하기 (0) | 2010.12.30 |