Add Speech Recognition icon to your html textbox

Wouldn’t it be nice if you could offer users where they can just speak instead of typing? Well all you need to do is to add keyword ‘x-webkit-speech’ to the existing textbox.

<input type="text" name="search" />

Try out a live demo – click the microphone icon and speak

To enable language based speech recognition add international language code to lang attribute of text box

<input lang="fr" type="text" name="search" x-webkit-speech/>

You can also set the language code at head section

<meta http-equiv='Content-Language' content='fr'/>

Currently, only Google Chrome supports the HTML speech input API and the microphone icon will be visible. For all other browser, it appears as normal text box.

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)