How to make below style:


Tags: html,css,html5

Problem :

I'd like to achieve something like this:

enter image description here

I've done this so far:

enter image description here

just wondering, how to make a purple area with little arrow button and once user click it, it would invoke something.

Here is the html and css code I have:

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


}

===================update==========================

Thank you guys....They all works. I just pick up one for the right answer. I've learnt a lot from codes with different version of answers below. Thank you for your help again.



Solution :

Fiddle: 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>   

Adapted from: speckyboy


    CSS Howto..

    how to place an image at the center of the browser irrespective of the resolution?

    How do you set a div's location to be centered when we don't know the screen size?

    How do I get my textboxes to align properly once triggered? - jQuery/CSS

    How can I 'page zoom' on mobile browser

    CSS - How can I set the content to attr() but when attribute isn't available, set it to 0 or another?

    How do i use floats for images while using
    so that
    still shows under image?

    CSS / jQuery: How to prevent tooltip from disappearing behind border of main wrapper (working code)

    Vaadin - How to customize MenuBar to look like links

    how to set a radio button state to checked with css?

    How can I make clickable list with sublinks ?

    How can I create a nav bar with a repeat image inside?

    How to separate html header and content with css and make the content scrollable

    CSS Help - How can a DIV ignore css previously set on the page?

    How do I create two columns using CSS?

    How to add padding to anchor tags in Top Bar in Foundation 6?

    How do I set a CSS width from a javascript function result?

    On Edge Browser, how to change input placeholder text color using CSS?

    how to make list view of show type given below?

    how to minify css file containing @page

    How do I get nested divs to be same height and expand to the largest of the heights?

    How to override HTML image using CSS

    How to apply styles to an element with a prefixed ID?

    How to setup CSS for multiple font choices? [closed]

    How to insert several images into HTML/CSS quickly? [closed]

    How to separate settings and css in a less?

    How would I make this CSS / jQuery dropdown menu multilevel?

    How to select loose text between tags

    How to position two divs on either side of the screen, HTML, CSS

    How can I place three block of contents in one line in a way that the middle block is always full width?

    How to skip first N elements with CSS or jQuery?