Simple and stylish Drop down using CSS

We have found a simple and decent way to achieve stylish select dropdown using CSS. It works across all browsers, simple to implement and moreover stylish.

1. Create a normal select dropdown as follows:

<select id="ddlCountry">
   <option value=""> --- Choose ---</option>
   <option value="India">India</option>
   <option value="China">China</option>
   <option value="Pakistan">Pakistan</option>
   <option value="Sri Lanka">Sri Lanka</option>
</select>

2. Now wrap the select with a div tag

<div class="ddlWrap">
   <select id="ddlCountry">
      <option value=""> --- Choose ---</option>
      <option value="India">India</option>
      <option value="China">China</option>
      <option value="Pakistan">Pakistan</option>
      <option value="Sri Lanka">Sri Lanka</option>
   </select>
</div>

3. Basically we are going to make the opacity 0 and add a background image for that

.ddlWrap select {
   opacity: 0;
   width: 215px;
   line-height: 1;
   border: 0;
   border-radius: 0;
   background: url("arrow_select.png") no-repeat 100% 0 #2D2D2D; //for IE
   -webkit-appearance: none; //for Google Chrome
   color: #fff;
   height: 32px;
}
.ddlWrap {
   width: 215px;
   overflow: hidden;
   background: url("arrow_select.png") no-repeat 100% 0 #2D2D2D;
   border: solid 1px #333333;
   border-radius: 5px;
   position: relative;
}

4. Now you will find a drop down with an arrow and no text to display, thats because the opacity is 0. Here we need to do a small tweak. We add addional span tag above the select and display the selected content.

<div class="ddlWrap">
   <span> --- Choose ---</span>
   <select id="ddlCountry">
      <option value=""> --- Choose ---</option>
      <option value="India">India</option>
      <option value="China">China</option>
      <option value="Pakistan">Pakistan</option>
      <option value="Sri Lanka">Sri Lanka</option>
   </select>
</div>

5. And update the style for span

.ddlWrap span {
   position: absolute;
   left: 10px;
   top: 5px;
}

6. Now with the help of jQuery we update the span with the selected dropdown text

$('select').click(function () {
   $(this).prev('span').text($(this).find('option:selected').text());
});

That’s it, we have done it. You can trigger a  ready event and update the selected content, if you do not wish to hard code ‘— Choose —‘.

Select drop down using CSS
Select drop down using CSS

 

Click here to download the full source code.

 

Courtesy: Biswanath Dey (BD)

Add Gravatar to your web sites using PHP & C#

Gravatar (an abbreviation for globally recognized avatar) is a service for providing globally unique avatars which was created by Tom Preston-Werner. On Gravatar, users can register an account based on their email address, and upload an avatar to be associated with the account. Gravatar plugins are available for popular blogging software; when the user posts a comment on such a blog that requires an e-mail address, the blogging software checks whether that e-mail address has an associated avatar at Gravatar.

PHP:


function GetAvatar($email)
{
   $emailMD5 = md5($email);
   $gravatarURL = "http://www.gravatar.com/avatar/" . $emailMD5 . ".jpg";
   $html="<img src='$gravatarURL' />"; return $html;
}

C#:


public string GetAvatar(string Email)
{
   string emailMd5 = Utilities.Encryption.MD5.ComputeHash(Email.Trim().ToLower()).ToLower();
   string gravatarURL = "http://www.gravatar.com/avatar/" + emailMD5 + ".jpg";
   string html = "<img src='" + $gravatarURL + "' />"; return html;
}