Question

我想实现这样的目标：

enter image description here

到目前为止我已经这样做了：

enter image description here

只是想知道，如何使用小箭头按钮制作一个紫色区域，一旦用户点击它，它就会调用一些东西。

这是我的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%;


}

===================更新========================== < / p>

谢谢你们......他们都行得通。我只拿了一个正确的答案。我从以下不同版本的答案的代码中学到了很多东西。再次感谢您的帮助。

Answer 1

选中 Fiddle

HTML

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

CSS

.searchy {
    background: grey;
    padding: 50px 20px;
}
input {
    border:none;
    background: none;
    border-top: 3px solid #e1e1e1;
    border-left: 3px solid #e1e1e1;
    border-bottom: 3px solid #e1e1e1;
    padding: 10px 3px;
}

button {

    border:none;
    background: #4fd577;
    padding: 9px 10px;
    margin-left: -5px;
    border-top: 3px solid #e1e1e1;
    border-right: 3px solid #e1e1e1;
    border-bottom: 3px solid #e1e1e1;

}
button { position: relative; background: #4fd577; } 
button:after { right: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } 
button:after { border-color: rgba(79, 213, 119, 0); border-right-color: #4fd577; border-width: 7px; top: 50%; margin-top: -7px; }

使用此工具创建css箭头： - http://cssarrowplease.com/

Answer 2

小提琴：http://jsfiddle.net/hBdMz/

的CSS：

.form-wrapper {
    width: auto;
    padding:4px;
    background: #555;
    clear:both;
    display:table;
}

/* Form text input */

.form-wrapper input {
    width: 330px;
    height: 20px;
    padding: 10px 5px;
    float: left;    
    border: 0;
    background: white;
    border-radius: 3px 0 0 3px; 
    outline:none;
}


/* Form submit button */
.form-wrapper button {
    overflow: visible;
    position: relative;
    float: right;
    border: 0;
    padding: 0;
    cursor: pointer;
    height: 40px;
    width: 110px;
    color: black;
    text-transform: uppercase;
    background: #9B30FF;
    border-radius: 0 3px 3px 0;      
    text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);
}   



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

Html：

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

改编自：speckyboy

Answer 3

在表单中创建一个包含SEARCH一词的分部和一个带有唯一类的img。

将您的分区置于绝对位置，顶部减去文本框的高度。将您的搜索部门浮动到右侧，浮动，您的img向左移动。将搜索分区设为宽度和高度。

Answer 4

http://jsfiddle.net/5BwLC/22/

HTML

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

CSS

    .searchy{

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

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


}
.searc
{
 width:85%; 
 overflow:hidden;

}

.search-button
{
    margin-top:15px;
    margin-left:-40px;
min-height:40px;  
 width:10%;
 background-color:purple;
  float:left;  
    padding:20px;
     vertical-align: middle;
     border-radius: 10px;
 border: 5px solid #E5E4E2;

}

你也想要箭头吗？

Answer 5

演示：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>

如果你想使用一个提交按钮git它的绝对位置右边宽度相同的尺寸：after和不透明度：0;

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

Answer 6

我不知道为什么我要将答案添加到堆中，但here it is：

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;
}

Answer 7

对此没有任何'正确'的回答。我就是这样做的：

使紫色框/箭头成为输入的背景图像。

将搜索文本/按钮放在位于输入框右侧上方的绝对定位的DIV中。

如何制作以下风格：

7 个答案: