HTML5/CSS入力フィールド（入力フィールド内にサブミットボタンとして画像がある）

入力フィールドにサブミットボタンを入れようとしました。「通常の」送信ボタンを使用する代わりに、入力フィールドに小さなアイコンを挿入しようとしましたが、成功しませんでした。私は入力フィールドの中にイメージ（寸法30 * 30ピクセル）を得ることができませんでした。HTML5/CSS入力フィールド（入力フィールド内にサブミットボタンとして画像がある）

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     <style> 
 
      input[type=text] { 
 
       position: relative; 
 
       width: 200px; 
 
       height: 36px; 
 
       box-sizing: border-box; 
 
       border: 2px solid #4d7fc3; 
 
       border-radius: 4px; 
 
       font-size: 16px; 
 
       background-color: white; 
 
       padding: 2px 2px 2px 10px; 
 
      } 
 
      input[type=submit] { 
 
       position: absolute 
 
       width: 30px; 
 
       height: 30px; 
 
       top: 0px; 
 
       right: 0px; 
 
       /* background-color: #4d7fc3; */ 
 
        border: none; 
 
        color: white; 
 
        background-image: url('file:///C|/Users/heilemann/Pictures/LoginPfeil.JPG'); 
 
        display: block; 
 
        background-position: 100px 100px 100px 100px; */ 
 
       /* background-repeat: no-repeat; */ 
 
       /* padding: 2px 2px 2px 30px; */ 
 
        z-index: -1; 
 
       margin: 10px; 
 
       cursor: pointer; 
 
      } 
 
     </style> 
 
    </head> 
 
    <body> 
 
     <p>Input with icon:</p> 
 
     <form> 
 
      <div id="Search"> 
 
        <input type="text" name="search" placeholder="Search.."> 
 
        <input type="submit" value=""> 
 
      </div> 
 
     </form> 
 
    </body> 
 
</html>

それは次のようになります。それはHTMLとCSSで行われる。ここ

出典

2016-09-07 NotJohnDoe

ています。また、画像のリンクが表示されません。 –

''を使わないのはなぜですか？ – hungerstar

あなたに好意をやっていなかったそれを超えると、あなたがアップ貼り付けコードでかなりの数のエラーが発生しました。

submit入力のposition: absolute;プロパティのあとに;を残しました。その要素を適切に配置するには、親コンテナをposition: relative;にする必要があります。この場合、親コンテナは#Searchでした。

これが処理されると、不必要なために削除できるかなりのプロパティがありました。以下の私のコードは...

#Search { 
    position: relative; 
    display: inline-block; 
} 

input[type=text] { 
    position: relative; 
    width: 200px; 
    height: 36px; 
    box-sizing: border-box; 
    border: 2px solid #4d7fc3; 
    border-radius: 4px; 
    font-size: 16px; 
    background-color: white; 
    /* 40px padding to account for submit */ 
    padding: 2px 40px 2px 10px; 
} 
input[type=submit] { 
    position:absolute; 
    width: 30px; 
    height: 100%; 
    top: 0px; 
    right: 0px; 
    border: none; 
    color: white; 
    background: url('file:///C|/Users/heilemann/Pictures/LoginPfeil.JPG') #4d7fc3 center center no-repeat; 
    display: block; 
    cursor: pointer; 
}

Working codepen here.

submitのためのあなたの背景画像は、あなたのマシン上のローカルファイルを参照しているので、誰も実際に見ることができないということだけで頭アップに役立ちますかどうかを確認それ以外はあなた以外。必ずindex.htmlファイルから正しいパスを割り当ててください。

これが役に立ちます。

出典

2016-09-07 17:50:06 ekfuhrmann

。

/*Clearing Floats*/ 
 
.cf:before, .cf:after{ 
 
    content: ""; 
 
    display: table; 
 
} 
 

 
.cf:after{ 
 
    clear: both; 
 
} 
 

 
.cf{ 
 
    zoom: 1; 
 
} 
 
/* Form wrapper styling */ 
 
.form-wrapper { 
 
    width: 450px; 
 
    padding: 15px; 
 
    margin: 150px auto 50px auto; 
 
    background: #444; 
 
    background: rgba(0, 0, 0, .2); 
 
    border-radius: 10px; 
 
    box-shadow: 0 1px 1px rgba(0, 0, 0, .4) inset, 0 1px 0 rgba(255, 255, 255, .2); 
 
} 
 

 
/* Form text input */ 
 

 
.form-wrapper input { 
 
    width: 330px; 
 
    height: 20px; 
 
    padding: 10px 5px; 
 
    float: left; 
 
    font: bold 15px 'lucida sans', 'trebuchet MS', 'Tahoma'; 
 
    border: 0; 
 
    background: #eee; 
 
    border-radius: 3px 0 0 3px; 
 
} 
 

 
.form-wrapper input:focus { 
 
    outline: 0; 
 
    background: #fff; 
 
    box-shadow: 0 0 2px rgba(0, 0, 0, .8) inset; 
 
} 
 

 
.form-wrapper input::-webkit-input-placeholder { 
 
    color: #999; 
 
    font-weight: normal; 
 
    font-style: italic; 
 
} 
 

 
.form-wrapper input:-moz-placeholder { 
 
    color: #999; 
 
    font-weight: normal; 
 
    font-style: italic; 
 
} 
 

 
.form-wrapper input:-ms-input-placeholder { 
 
    color: #999; 
 
    font-weight: normal; 
 
    font-style: italic; 
 
} 
 

 
/* Form submit button */ 
 
.form-wrapper button { 
 
    overflow: visible; 
 
    position: relative; 
 
    float: right; 
 
    border: 0; 
 
    padding: 0; 
 
    cursor: pointer; 
 
    height: 40px; 
 
    width: 110px; 
 
    font: bold 15px/40px 'lucida sans', 'trebuchet MS', 'Tahoma'; 
 
    color: #fff; 
 
    text-transform: uppercase; 
 
    background: #d83c3c; 
 
    border-radius: 0 3px 3px 0; 
 
    text-shadow: 0 -1px 0 rgba(0, 0, 0, .3); 
 
} 
 

 
.form-wrapper button:hover{ 
 
    background: #e54040; 
 
} 
 

 
.form-wrapper button:active, 
 
.form-wrapper button:focus{ 
 
    background: #c42f2f; 
 
    outline: 0; 
 
} 
 

 
.form-wrapper button:before { /* Left arrow */ 
 
    content: ''; 
 
    position: absolute; 
 
    border-width: 8px 8px 8px 0; 
 
    border-style: solid solid solid none; 
 
    border-color: transparent #d83c3c transparent; 
 
    top: 12px; 
 
    left: -6px; 
 
} 
 

 
.form-wrapper button:hover:before{ 
 
    border-right-color: #e54040; 
 
} 
 

 
.form-wrapper button:focus:before, 
 
.form-wrapper button:active:before{ 
 
     border-right-color: #c42f2f; 
 
} 
 

 
.form-wrapper button::-moz-focus-inner { /* Remove extra button spacing for Mozilla Firefox */ 
 
    border: 0; 
 
    padding: 0; 
 
}

<form class="form-wrapper cf"> 
 
    <input type="text" placeholder="Search..." required> 
 
    <button type="submit">Search</button> 
 
</form>

出典

2016-09-07 17:44:29 SreYash

ありがとうございます、うまく動作します – NotJohnDoe

は、両方のバリアントは動作しますが、両方のバリアントを試してみました第2の解決策は、私たちが見てする必要があるコードを減らしてみてくださいclothest

出典

2016-09-09 07:09:13 NotJohnDoe

HTML5/CSS入力フィールド（入力フィールド内にサブミットボタンとして画像がある）

答えて

関連する問題