input에 css 적용 질문있습니다.

css초보 · Post by **css초보** » 2005 06 18 10:04 14

안녕하세요?
어쩌다가 css와 웹 표준에 관심을 갖게 되어서 이곳에서 많은 도움을 받고 있습니다.
그런데 오늘 작업하다 이상한 것이 있어서 이렇게 질문을 남깁니다.
폼 요소들 중 파일 업로드(input type=file) 컨트롤(? 이렇게 표현하는게 맞나요??;;)
에 css를 적용하니 ie와 ff가 서로 다르게 보이네요.
소스는 아래와 같습니다. #input_file <-- 요 부분이 ie와 ff가 다르게 보이는 부분입니다.
어떻게 수정해야지 둘다 같게 보이나요??

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html;charset=euc-kr" />

<style>
#input_file{
border: 1px solid #0f0f0f;
width: 450px;
}
#frm{
position: absolute;
margin: 100px;
padding: 0px;
width: 700px;
}

fieldset {
border:none;
background-color:#F0F0F0;
padding:3px;
vertical-align:top;
display:block;
border-bottom:3px solid #FFFFFF;
}

fieldset label {
width:80px;
/*background-color:#EFEFEF;*/
vertical-align:top;
text-align:right;
font-size:12px;
font-weight:bold;
font-family:georgia, 굴림;
display:block;
margin-top:1px;
float:left;
height:16px;
border:0px solid silver;
padding-top:3px;
margin-right:3px;
}

.fld_name {
float:left;
width:50%;
}

.fld_password {
float:none;
}

fieldset input,
fieldset select {
width:140px;
height:20px;
border:1px solid #0f0f0f;
margin:0px;
}

fieldset textarea {
width:450px;
height:160px;
border:1px solid #0f0f0f;
}

.fld_title input,
.fld_mail input {
width:450px;
}

.fld_button {
text-align:center;
}

.button {
border: 1px solid #feafaf;
width:80px;
height:21px;
text-align:center;
}
</style>

<script type="text/javascript" src="/board/js/board.js"></script>

<title>게시판 글쓰기</title>

</head>

<body>

<form id="frm" method="post" action="" enctype="multipart/form-data">

<fieldset class="fld_name">
<label>이름</label>
<input type="text" name="user_name" value="<?=$user_name?>" />
</fieldset>

<fieldset class="fld_password">
<label>패스워드</label>
<input type="password" name="password" />
</fieldset>

<fieldset class="fld_file">
<label>파일첨부</label>
<input type="file" name="upfile" id="input_file" />
</fieldset>

</form>

</body>

</html>

박민권 · Post by **박민권** » 2005 06 19 16:50 57

input, textarea 등의 폼 객체는 css를 이용해서 완전히 똑같이 구현할 수가 없습니다.
select 같은 경우도 윈xp와 윈2000에서 보이는 모습이 틀리고
윈xp의 테마에 따라서 틀려집니다.
<input type="file" 같은 경우도 익스, 불여우, 오페라 서로 틀립니다.
오페라는 자기 나름대로 이쁘게 꾸며져서 나옵니다.
저도 처음에는 폼객체들도 이쁘게 꾸미고 싶어 별 방법을 다 찾아봤지만
무의미 하다는 것을 알았습니다.
<input type="text"나 textarea만 border에 색상을 줄뿐 나머지
폼객체는 있는 모습 그대로 쓰는 것이 좋더군요.
스크립트등을 이용해서 억지로 모습을 꾸며봤자 돌아오는 것은
떨어지는 웹접근성뿐이었습니다.
폼객체를 꾸미는 것에 너무 신경쓰지 마세요. :D

css초보 · Post by **css초보** » 2005 06 22 10:01 34

이래저래 많이 복잡하네요..^^
잘 배웠습니다..

Mozilla 한국 커뮤니티

input에 css 적용 질문있습니다.

input에 css 적용 질문있습니다.

이건 방법이 없습니다.

답변 감사합니다.

Who is online