input에 css 적용 질문있습니다.
Posted: 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>
어쩌다가 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>