Can you tell me what Display Results Method you are using, and with what theme (or self made theme)?

Do you have a live page I can see it on, as Custom CSS (which is what would be needed for the button question) will be easier for me to make for you.

Any other customizations might also depend on the theme in use (such as if keyword highlighting is possible). It might be that installing the free Relevanssi plugin (and enabling support in the S&F advanced options, I think that plugin has options to highlight keywords (which would mean wrapping them in spans).

OK. The >> is made by your theme and needs to be switched off inside search and filter forms, with Custom CSS:

.bSe .searchandfilter ul li::before {content: '' !important;}

To put the search field and button next to each other, this:

.searchandfilter .sf-field-search {
  display: inline-block;
  padding-left: 0 !important;
  margin-right: 20px;
}
.searchandfilter .sf-field-submit {
  display: inline-block;
  padding-left: 0 !important;
}

For the second point, to hide results until a search has been made, I need to know you have placed a copy of the results.php file in your theme or child theme folder, as here:

https://www.designsandcode.com/documentation/search-filter-pro/search-results/using-a-shortcode/#Customising_the_Results

Assuming that you have, edit that file and replace the content with this:

<?php
/**
 * Search & Filter Pro 
 *
 * Sample Results Template
 * 
 * @package   Search_Filter
 * @author    Ross Morsali
 * @link      http://www.designsandcode.com/
 * @copyright 2015 Designs & Code
 * 
 * Note: these templates are not full page templates, rather 
 * just an encaspulation of the your results loop which should
 * be inserted in to other pages by using a shortcode - think 
 * of it as a template part
 * 
 * This template is an absolute base example showing you what
 * you can do, for more customisation see the WordPress docs 
 * and using template tags - 
 * 
 * http://codex.wordpress.org/Template_Tags
 *
 */

global $searchandfilter;
$sf_current_query = $searchandfilter->get(255)->current_query();
if ((!$sf_current_query->is_filtered())&&($sf_current_query->get_search_term()=="")) {
  echo '<div>Nothing to see here folks!</div>'; 
} else {
	
	if ( $query->have_posts() )
{
	?>
	
	Found <?php echo $query->found_posts; ?> Results<br />
	Page <?php echo $query->query['paged']; ?> of <?php echo $query->max_num_pages; ?><br />
	
	<div class="pagination">
		
		<div class="nav-previous"><?php next_posts_link( 'Older posts', $query->max_num_pages ); ?></div>
		<div class="nav-next"><?php previous_posts_link( 'Newer posts' ); ?></div>
		<?php
			/* example code for using the wp_pagenavi plugin */
			if (function_exists('wp_pagenavi'))
			{
				echo "<br />";
				wp_pagenavi( array( 'query' => $query ) );
			}
		?>
	</div>
	
	<?php
	while ($query->have_posts())
	{
		$query->the_post();
		
		?>
		<div>
			<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
			
			<p><br /><?php the_excerpt(); ?></p>
			<?php 
				if ( has_post_thumbnail() ) {
					echo '<p>';
					the_post_thumbnail("small");
					echo '</p>';
				}
			?>
			<p><?php the_category(); ?></p>
			<p><?php the_tags(); ?></p>
			<p><small><?php the_date(); ?></small></p>
			
		</div>
		
		<hr />
		<?php
	}
	?>
	Page <?php echo $query->query['paged']; ?> of <?php echo $query->max_num_pages; ?><br />
	
	<div class="pagination">
		
		<div class="nav-previous"><?php next_posts_link( 'Older posts', $query->max_num_pages ); ?></div>
		<div class="nav-next"><?php previous_posts_link( 'Newer posts' ); ?></div>
		<?php
			/* example code for using the wp_pagenavi plugin */
			if (function_exists('wp_pagenavi'))
			{
				echo "<br />";
				wp_pagenavi( array( 'query' => $query ) );
			}
		?>
	</div>
	<?php
}
else
{
	echo "No Results Found";
}
}
?>

That should work, I hope.

For #3. It would be better to use your theme’s own styling, and to do this I would need to see a more normal results page in your theme that looks OK to you, then we can borrow their styling.