답변 2개
채택된 답변
+20 포인트
8년 전
</p><p><!DOCTYPE html></p><p><html></p><p> <head></p><p> <meta charset="UTF-8" /></p><p> <style type="text/css"></p><p> * { margin: 0; padding: 0; }</p><p> </p><p> /* for flexible test */</p><p> /* .wrap { position: absolute; width: 50%; left: 20%; top: 30%; } */</p><p>
</p><p> .frm * { box-sizing: border-box; }</p><p> .frm { background-color: #eee; display: inline-block; width: 100%; }</p><p> .frm fieldset { background-color: #fff; margin: 0.5em; border: 0.08em solid #ccc; }</p><p> .frm legend { display: none; }</p><p> .frm ul { list-style-type: none; }</p><p> .frm ul li { border-bottom: 0.08em solid #ddd; }</p><p> .frm ul li:last-child { border-bottom: 0 none; }</p><p> .frm input { width: 100%; border: 0 none; padding: 1.0em; }</p><p>
</p><p> .frm input {</p><p> background-image: url(<a href="<a href="https://thumb7.shutterstock.com/display_pic_with_logo/1660276/428770555/stock-vector-simple-set-of-interface-related-vector-line-icons-contains-such-icons-as-accept-decline-zoom-428770555.jpg);" target="_blank" rel="noopener noreferrer">https://thumb7.shutterstock.com/display_pic_with_logo/1660276/428770555/stock-vector-simple-set-of-interface-related-vector-line-icons-contains-such-icons-as-accept-decline-zoom-428770555.jpg);</a>"><a href="https://thumb7.shutterstock.com/display_pic_with_logo/1660276/428770555/stock-vector-simple-set-of-interface-related-vector-line-icons-contains-such-icons-as-accept-decline-zoom-428770555.jpg);" target="_blank" rel="noopener noreferrer">https://thumb7.shutterstock.com/display_pic_with_logo/1660276/428770555/stock-vector-simple-set-of-interface-related-vector-line-icons-contains-such-icons-as-accept-decline-zoom-428770555.jpg);</a></a></p><p> background-repeat: no-repeat;</p><p> }</p><p> .frm input[name="id"] { background-position: calc(100% + 350px) 80%; }</p><p> .frm input[name="pw"] { background-position: calc(100% + 350px) 58%; }</p><p> .frm input[name="pw_confirm"] { background-position: calc(100% + 350px) 36%; }</p><p>
</p><p> .frm input[type="radio"] { width: auto; }</p><p>
</p><p> .hide { display: none; }</p><p> .ta_c { text-align: center; }</p><p> .width_48 { display: inline-block; width: 48%; }</p><p> .frm a.instead_radio {</p><p> text-decoration: none;</p><p> background-color: #fff;</p><p> border: 0.08em solid #ccc;</p><p> border-right: 0 none;</p><p> color: #777;</p><p> margin: 0.3em 0 0.3em 0;</p><p> padding: 0.4em 0;</p><p> text-align: center;</p><p> }</p><p> .frm a.instead_radio:last-child {</p><p> border-right: 0.08em solid #ccc;</p><p> }</p><p> .frm a.instead_radio:hover,</p><p> .frm a.instead_radio:active {</p><p> background-color: #777;</p><p> color: #eee;</p><p> }</p><p> </style></p><p> </head></p><p> <body></p><p>
</p><p> <div class="wrap"></p><p> <form class="frm"></p><p> <fieldset></p><p> <legend>accout</legend></p><p> <ul></p><p> <li><input type="text" name="id" placeholder="아이디" /></li></p><p> <li><input type="password" name="pw" placeholder="비밀번호" /></li></p><p> <li><input type="password" name="pw_confirm" placeholder="비밀번호 재확인" /></li></p><p> </ul></p><p> </fieldset></p><p> <fieldset></p><p> <legend>personal</legend></p><p> <ul></p><p> <li><input type="text" name="nm" placeholder="이름" /></li></p><p> <li class="ta_c"></p><p> <div class="hide"></p><p> <input type="radio" value="male" />남자</p><p> <input type="radio" value="female" />여자</p><p> </div></p><p> <a href="#" class="width_48 instead_radio">남자</a><a href="#" class="width_48 instead_radio">여자</a></p><p> </li></p><p> </ul></p><p> </fieldset></p><p> </form></p><p> </div></p><p>
</p><p> </body></p><p></html></p><p>
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인