css form input type="text" readonly 문의하기 만들기

 

 

 

초기화코드로 form 디자인 없애기

 

 

/* legend,caption,메뉴제목,섹션제목 블라인드 */

legend, caption, .blind { position: absolute; overflow: hidden; clip: rect(0 0 0 0); margin: -1px; width: 1px; height: 1px }

 

/* 칸의 선을 합치기, 칸의 간격없애기, 가로를 늘려줌 */

table {border-collapse: collapse; border-spacing: 0; width: 100%; table-layout: fixed;}

 

 

---

예제코드 

            <form>
              <fieldset>
                <legend>문의작성하기</legend>
                <div class="inquri_wrap">
                  <table>
                    <caption>문의하기테이블</caption>
                      <tr>
                        <th class="col01">이름<i class="star"></i></th>
                        <td><input type="text" readonly value="박효진" title="이름입력"></td>
                      </tr>
                      <tr>
                        <th>연락처<i class="star"></i></th>
                        <td><input type="text" title="연락처입력"></td>
                      </tr>
                      <tr>

 

readonly  

 

 이름 부분이 먼저 들어가있고 사용자가 쓸수 없도록 미리 지정해준다

<td><input type="text" readonly value="박효진" title="이름입력"></td>

 

(title 미적용시 웹 접근성 경고)

---

표 디자인

 

테이블의 첫행 섹션이 없으므로 thead는 필요없음

단 th로 첫열 칸이름을 지정하여 클래스명으로 넓이를 지정할수 있게한다.

<!-- thead가 없을경우 table-layout:fixed 없어야 길이 조정됨 -->

 

 

 

html 작성 예 )
<th class="col01">이름<i class="star"></i></th>

---

 

표 길이 자동조정 

.inquiry_page .inquiry_area table {
    table-layout: auto;
}

 

 

디테일 디자인 조정 

.inquiry_page .inquiry_area th {
    border-bottom: 1px solid #e8e8e8;
    padding: 12px 0;
    text-align: left;
    font-weight: 500;
}

 

지정해줬던 첫행칸의 클래스명으로 넓이조정 

.inquiry_page .inquiry_area .col01 {
    width: 130px;
}

.inquiry_page .inquiry_area td {
    border-bottom: 1px solid #e8e8e8;
    padding: 12px 0;
}

---

속성선택자에 focus 로 테두리선 없애주기

.inquiry_page .inquiry_area input[type=text]:focus {

    outline: none;

}