1

私はこのようなことを達成したいと思います:

ここに画像の説明を入力

私はこれまでこれを行ってきました：

ここに画像の説明を入力

小さな矢印ボタンで紫色の領域を作成する方法と、ユーザーがそれをクリックすると、何かが呼び出されるのは不思議です。

私が持っているhtmlとcssコードは次のとおりです。

  <div class="searchy">
    <input type="search" name="ttsearch" data-style="mini" data-theme="d" placeholder="Search here..." class="fdSearch" value=""/> 
  </div>

CSS:

 .searchy{

 height: 60px;
 background-color: #555;
 color: #FFF;
 margin-left: -15px;
 margin-right: -15px;
 }

 .fdSearch{

 background-color: white;
 border-radius: 10px;
 border: 5px solid #E5E4E2;
 margin: 2px;
 margin-left: -15px;
 margin-right: -15px;
 height: 40px;
 vertical-align: middle;
 padding: 20px;
margin-top: 15px;
width: 85%;


}

===================更新==========================

みんなありがとう....それらはすべて動作します。正しい答えを1つだけピックアップします。以下のさまざまなバージョンの回答を持つコードから多くのことを学びました。またお世話になります。

4

7 に答える 7

1

答えをヒープに追加する理由はわかりませんが、次のとおりです。

HTML:

<div class="searchy">
    <div class="search-wrap">
        <input type="search" name="ttsearch" data-style="mini" data-theme="d" placeholder="Search here..." class="fdSearch" value="" />
        <button type="submit">Search</button>
    </div>
</div>

CSS:

.searchy {
    height: 60px;
    background-color: #555;
    color: #FFF;
    position: relative;
    padding: 0 6%;
}
.searchy:after {
    content:'';
    height: 100%;
    display: inline-block;
    vertical-align: middle;
}
.search-wrap {
    background-color: white;
    border-radius: 10px;
    border: 5px solid #E5E4E2;
    margin: 2px;
    height: 40px;
    vertical-align: middle;
    width: 85%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
    display: inline-block;
}
.search-wrap > input, .search-wrap > button {
    margin: 0;
    height: 100%;
    border: 0;
}
.search-wrap input[type="search"] {
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    appearance: textfield;
    width: 100%;
}
/* Unfortunately these have to be separate: http://css-tricks.com/snippets/css/style-placeholder-text/ */
 .search-wrap input[type="search"]::-webkit-input-placeholder {
    font-style: italic;
}
.search-wrap input[type="search"]:-moz-placeholder {
    /* Firefox 18- */
    font-style: italic;
}
.search-wrap input[type="search"]::-moz-placeholder {
    /* Firefox 19+ */
    font-style: italic;
}
.search-wrap input[type="search"]:-ms-input-placeholder {
    font-style: italic;
}
.search-wrap button[type="submit"] {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    background: #7c7aa9;
    color: #fff;
    text-transform: uppercase;
    padding: 0 10px;
}
.search-wrap button[type="submit"]:before {
    position: absolute;
    content:'';
    border: 6px solid transparent;
    border-right-color: #7c7aa9;
    height: 0;
    top: 0;
    bottom: 0;
    margin: auto 0;
    left: -10px;
}
于 2013-08-28T04:39:29.883 に答える
1

デモ: http://jsfiddle.net/gxXYC/ 

.searchy{
     position:relative;
     height: 60px;
     width:480px;
     background-color: #555;
     color: #FFF;
 }
 .searchy:before, .searchy:after{
     position:absolute;
    top:0;
 }
.searchy:before{
    content:"";
   width: 0; 
    height: 0; 
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent; 
    border-right:10px solid blue;
    right:100px;
    top:20px;
}
.searchy:after{
    content: "search";
    color:white;
    text-align:center;
width: 96px;
height: 84%;
top: 5px;
    font-size: 23px;
line-height: 44px;
background: blue;
right: 4px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
  }
 .fdSearch{
 background-color: white;
 border-radius: 10px;
 border: 5px solid #E5E4E2;
 height: 100%;
 vertical-align: middle;
 padding: 20px;
 width: 100%;
 float:left;
}

マークアップ

<div class="searchy">
    <input type="search" name="ttsearch" data-style="mini" data-theme="d" placeholder="Search here..." class="fdSearch" value=""/> 
  </div>

送信ボタンを使用したい場合は、 :after と opacity :0; と同じ大きさの右幅の絶対位置を git してください。

http://jsfiddle.net/gxXYC/2/

于 2013-08-28T04:27:50.753 に答える