2

ファイル フィールドをイメージアイコンに置き換えたいです。ファイル フィールドがかっこよく見えないからです。

このカメラ アイコンを見てください。誰かがこのアイコンをクリックすると、閲覧ウィンドウが開きます: ここに画像の説明を入力

ここに JsFiddle DEMO があります: http://jsfiddle.net/8aJb4/2/

ここに私のコードがあります:

HTML:

<div class="container">
    <input type="file" name="image_src" id="image_src" >
</div>

CSS:

.container{
    width:500px;
    border:black solid 1px;
    text-align:center;
    padding:4px;

}

画像アイコンへのリンクは次のとおりです: http://postimg.org/image/rg17ffpxh/

4

3 に答える 3

4

ここにフィドルがあります

<div class="container">
  <span class="select-wrapper">
    <input type="file" name="image_src" id="image_src" />
  </span>
</div>


.container{
  width: 500px;
  border: 1px solid #333;
  padding: 4px;
}
.select-wrapper {
  background: url(http://s10.postimg.org/4rc0fv8jt/camera.png) no-repeat;
  background-size: cover;
  display: block;
  position: relative;
  width: 33px;
  height: 26px;
}
#image_src {
  width: 26px;
  height: 26px;
  margin-right: 100px;
  opacity: 0;
  filter: alpha(opacity=0); /* IE 5-7 */
}
于 2013-09-17T16:53:54.420 に答える