socialforge/app/views/welcome/_search_project.html.erb

<%
	select_option = []
	(select_option << [l('welcome.search.select.project'), 'projects']) if project_type == Project::ProjectType_project
	(select_option << [l('welcome.search.select.course'), 'courses']) if project_type == Project::ProjectType_course
	select_option << [l('welcome.search.select.user'), 'users']
%>
<style type="text/css">
form #q, form #search_type{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	display: inline-block;
	margin: 0px;
	padding: 5px;
	height: 33px;
}
form #q{
	font-size: 13px;
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
	border-right: none;

}
form #search_type{
	font-size: 13px;
	color: #363739;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
	border-bottom-left-radius: 0px;
	border-top-left-radius: 0px;
	border-left: 1px outset #83A9A9;
	margin-left: 0px;
	-webkit-appearance: none;
	-moz-appearance: none;
	text-indent: 0.01px;
	text-overflow: '';
  padding-right:10px;
  background-image:url(/images/arrow_expanded.png)!important;
  background:no-repeat right;
}

form #search_by
{
    font-size: 13px;
    color: #363739;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 0px;
    border-top-left-radius: 0px;
    border-left: 1px outset #83A9A9;
    margin-left: 0px;
    -webkit-appearance: none;
    -moz-appearance: none;
    text-indent: 0.01px;
    text-overflow: '';
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: inline-block;
    padding: 5px;
    height: 33px;
    display: none;
}

.search_widget{
	display:inline-block;
	border-radius: 5px;
    float: right;
}
.search_widget:hover{
	box-shadow: 0px 0px 3px #56B4EF;
}
<%#完了把上面东西放到 .css 里%>
</style>
<!--[if IE]>
<!--<style type="text/css">-->
  <!--form #search_type{-->
    <!--background:none!important;-->
  <!--}-->
<!--</style>-->
<![endif]-->
<script type="text/javascript">
  $(function(){
    var userAgent = navigator.userAgent.toLowerCase();
    if(/trident/.test(userAgent)){
      $('form #search_type').css({'background-image':'none!important'});
    }
  });
</script>
<script type="text/javascript">
  function searchTypeChange()
  {
      if($("#search_type").val() == "users")
      {
          $("#q").attr('placeholder','登录名/姓名/邮箱');
//          $("#search_by").show();
      }
      else
      {
          $("#search_by").hide();
          $("#q").attr('placeholder',"<%=l('welcome.search.information')%>");
      }
  }

  function searchByChange()
  {
      $("#search_by_input").val($("#search_by").val());
  }
</script>
<%= form_tag({controller: :welcome, action: :search }, method: :get) do %>
<div class="project-search" style="float: right">
    <%= submit_tag l(:label_search), :class => "enterprise", :name => nil,:style =>"float: right; margin-left:3px;margin-top:2px" %>
	<div class='search_widget' >
		<%= text_field_tag :q, nil, :placeholder => l('welcome.search.information'), style:"float:left; width:185px;" %>
        <input type="text" name="search_by_input" style="display: none" id="search_by_input" value="0">
		<%= select_tag(:search_type, options_for_select(select_option), :onchange => "searchTypeChange();", :style => "float:right" ) %>
        <%= select_tag(:search_by,options_for_select([[l('welcome.search.select.userinfo.nickname'),"0"],[l('welcome.search.select.userinfo.showname'),"1"],[l('welcome.search.select.userinfo.email'),"2"]]), :onchange => "searchByChange();",:style => "float:right;display:none;" )  %>
	</div>
		<%#= hidden_field_tag 'project_type', project_type %>
</div>
<% end %>