Horizontal dropdown select with images

Question

I have a classic select dropdown, data-bound with angular.

<select class="form-control" ng-model="category">
   <option value="work">Work</option>
   <option value="home">Home</option>
   <option value="practical">Practical</option>
   <option value="no">No category</option>
</select>

I would like these dropdown options to be horizontal images, instead of vertical text. Not this:

SELECT BUTTON

work
home
practical

But this:

SELECT BUTTON

work image - home image - practical image

I've been playing with display: inline-blocks, floats (yikes) and even thinking about radio buttons considering this SO question. I'm trying to learn Angular so no JQuery please. Thank you

Do you have only 4 options? Or is that list data driven? Cheers! — potatopeelings, Jul 27 '15 at 13:05
I only have 4, static, options. It's just a sample webapp to learn. Thanks for enquiring. — RobSeg, Jul 27 '15 at 13:09

score 1 · Accepted Answer · answered Jul 27 '15 at 13:39

There are limitations on how you can style selects. You'd either have to pick from one of the numerous stylable select plugins out there or roll your own like so

<div ng-app="app">
    <div ng-controller="ctrlr">
        <span ng-repeat="entry in categories">
            <img ng-click="setCategory(entry)" ng-src="{{entry.src}}">
        </span>
        <div>Selected = {{category}}</div>
    </div>
</div>

<script>
    angular.module('app', []);
    angular.module('app').controller('ctrlr', function ($scope) {
        $scope.categories = [
            {
                code: 'work',
                src: 'Work.png'
            },
            {
                code: 'home',
                src: 'Home.png'
            },
            {
                code: 'practical',
                src: 'Practical.png'
            },
            {
                code: 'no',
                src: 'No category.png'
            }
        ];

        $scope.setCategory = function (entry) {
            $scope.category = entry.code;
        }
    });
</script>

Horizontal dropdown select with images

1 Answers1