How to Run Android Apps Without An Android Device

Are you an Android user or do you want to run Android apps but don't have an Android device? Have you ever wondered running an Android app not from an Android smartphone or tablet?

Well, wonder no more, BlueStacks for PC, Mac and TV is here! Choose your device, install and follow the installation wizard. After installation, you will be asked for your Gmail account to associate your "Android" device. This is similar to when you first started using your real Android device.

With BlueStacks, now you can play 2048 or Don't Tap The White Tile on a much bigger screen! Or if you're still crazy on the defunct Flappy Bird (or its clones) and want a higher score, you can install it easily on BlueStacks (as long as you have the .apk file - I have!) and play 'til your index finger gets numbed, LOL. Now you will have the greatest feeling in the world that your 6-year old daughter doesn't grab your phone anymore as she can play Princess Nail Salon or Frozen Free Fall on her computer.

Here's a video of my daughter playing Tower of Hanoi (Drag-n-Drop) using BlueStacks for PC.

Simplest Cross-Browser Custom Upload Button Using Basic CSS

If you google for custom upload button, you will find tons of blogs and stackoverflow answers that employ cool and complicated CSS tricks to customize the input file button. Some even require JavaScript. Those are well and good but I also believe in the KISS principle.

Well, enough of the rumblings and let's dive in to the code.

First, let's see how the default input file button looks like.

Code:
<input type="file" name="upload_file" />

Demo:

That's how the default input file control looks like in this browser. And it looks different on every browser. In Google Chrome, it displays "Choose File" button and next to it is the text "No file chosen". In Firefox, the button is called "Browse..." and the text says "No file selected.". In Internet Explorer, there is a textbox and a "Browse..." button. Styling this control is very limited. For one, you can't change the button label.

Now, let's see a customized version of it.

Code:
<label><input type="file" name="upload_file" style="position:absolute; left:-9999px" />Upload</label>

Demo: (Click Upload to see that the browser's File dialog appears)

Upload 

That's it! That's the simplest cross-browser (did I mention it works in IE6?) custom file upload button ever, as in ever. No advanced CSS3 tricks or browser vendor specific CSS required, nor JavaScript nor jQuery, just plain old <label> tag and the associated input file inside it. Of course, you can move the inline style to external CSS but that's just basically about it.

Now let's make it more fancy and style it like a button.

Code:
<style>
.custom-upload {
    background-color: #008000;
    border: 1px solid #006400;
    border-radius: 4px;
    cursor: pointer;
    color: #fff;
    padding: 4px 10px;
}
.custom-upload input {
    left: -9999px;
    position: absolute;
}
</style>
<label class="custom-upload"><input type="file" name="upload_file" />Upload</label>

Demo: (Click Upload to see that the browser's File dialog appears)

Upload 

You can also attach event handlers to the input file as you normally would.

That's how simple it is. Enjoy! :)

Let me know what you think in the comments.