Using CSS to customize the look of a SharePoint Search Box Web Part

I recently received a request from one of our users about dropping a Search Box web part on a page of their site that would provide users with the ability to search for local content on this site.  This typically isn't a problem; however, in this situation, we already had a Search Box web part installed on the site via the master page with a rather heavily customized look.  Unfortunately, that look didn't go well at all with this new web part so, to fix the problem, I dropped an Embed Code/Script Editor web part at the bottom of their web page and added the following CSS that brought the Search Box back to a more "normal", but slightly customized look:

Here's the look they wanted (nothing really fancy, as you can see):

Here's the CSS:

<style>
   #WebPartWPQ2 #SearchBox {
      width: 650px;
   }

   #WebPartWPQ2 .ms-srch-sbLarge > .ms-srch-sb-searchLink {
      background-color: #fff;
      float: right;
      color: #fff;
      text-decoration:none;
      height: 24px;
      width: 33px;
   }


   #WebPartWPQ2 .ms-srch-sbLarge>input {
      border: 1px solid black;
      border-radius: 5px;
      font-size:16px;
      height:30px;
      width: 600px;
      margin: 0px 0px 0px 0px;
      padding: 5px 1%;
   }

   #WebPartWPQ2 .ms-srch-sbLarge-searchImg {
      position: relative;
   }
</style>

NOTE: I'm specifically targeting their web part's ID, WebPartWPQ2; therefore, you'll want to change that to reflect the ID of you web part or remove it if you want all Search Boxes to inherit that particular look.

CSOM CamlQuery Example - Returning list items that fall within a specified date range

Since CamlQuery isn't very intuitive or easy to work with, I thought I'd put together a serious of posts that display some examples that you can use in order to make it work better for you.

In this particular example, I'm connecting to a SharePoint list and performing the following activities:

1. Filtering the list items that were created within a specified date range while, also, ignoring the time values.  NOTE:  If you need to include the time values, simply change the IncludeTimeValue attribute from FALSE to TRUE.
2. Ordering the list so that it returns the most recently created items first and older items last

So that you can focus on the actual CamlQuery structure, I've greatly simplified the code as follows:

var selectedMinDate = '2018-1-1';
var selectedMaxDate = '2018-1-31';

var camlQueryText = "<View><Query><Where><And><Geq><FieldRef Name=\'Created\' /><Value Type=\'DateTime\' IncludeTimeValue=\'FALSE\' >"
+ selectedMinDate + "</Value></Geq><Lt><FieldRef Name=\'Created\' /><Value Type=\'DateTime\' IncludeTimeValue=\'FALSE\' >"
+ selectedMaxDate + "</Value></Lt></And></Where><OrderBy><FieldRef Name=\'Created\' Ascending=\'False\' /></OrderBy></Query></View>";

var ctx = new SP.ClientContext.get_current();
var camlQuery = new SP.CamlQuery();
camlQuery.set_viewXml(camlQueryText);
this.items = ctx.get_web().get_lists().getByTitle('NameOfList').getItems(camlQuery);
ctx.load(items);
ctx.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));

function onQuerySucceeded(sender, args) {
     while (listItemEnumerator.moveNext()) {
          var oListItem = listItemEnumerator.get_current();
          var itemInfo = oListItem.get_item('Title') + " - " + oListItem.get_item('Created');
          alert(itemInfo);
     }
}

function onQueryFailed(sender, args) {
     alert('request failed ' + args.get_message() + '\n'+ args.get_stackTrace());
}