how to change search-box design?

This blog post might be what you're looking for. Almost all changes can be done through CSS

http://mydrupalblog.lhmdesign.com/theming-search-submit-button-css-cross...

---------------------------------------------------------------------
"I am a very model of a modern major general"
http://www.wiiliketopodcast.com

You can create a template file for the search block in your custom theme. Just like you can theme node types based on the name of the template file, you can create a file called search-block-form.tpl.php to theme the search block.

Example contents:

<input type="text" maxlength="128" name="search_block_form_keys" id="edit-search_block_form_keys"  
size="20" value="" title="Enter the terms you wish to search for." class="form-text" />
<input type="image" src="<?php echo base_path() . path_to_theme(); ?>/images/search-button.png"  name="op" value="Search"  class="form-image" />
<input type="hidden" name="form_id" id="edit-search-block-form" value="search_block_form" />
<input type="hidden" name="form_token" id="a-unique-id" value="<?php print drupal_get_token('search_block_form'); ?>" />

Of course, you'd need to create the image and upload it into your theme folder, and any of the ids would be theme-able using CSS.
Just some more ideas *grin.

Update:
You also need to add the following to your template.php file:

function phptemplate_search_block_form($form) {
  /**
   * This snippet catches the default searchbox and looks for
   * search-theme-form.tpl.php file in the same folder
   * which has the new layout.
   */
  return _phptemplate_callback('search-block-form', array('form' => $form));
}

------------------------

http://fraggles.artsci.wustl.edu (Drupal user documentation and development blog)

You can get tons of
search box design and inspiration

from http://www.bigsearchbar.com

Any suggestion how to do the same in D8 OR create something like in https://blog.hubspot.com/.