rounded corners and highlight the selected one

Question

I am working on angularJS application. I have a webpage with multiple tabs created using angularJs. Please find the working tabs example : http://plnkr.co/edit/jHsdUtw6IttYQ24A7SG1?p=preview

I want to show the border of all the tabs with rounded corners and highlight the selected tab as shown in the image below. I tried using css but could not achieve as expected. Please suggest. Please click here to view image of the Tabs as expected to be

Code:

<html>   
   <head>
        <script data-require="angular.js@1.1.5" data-semver="1.1.5" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js"></script>
        <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.5.0.js"></script>
        <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
        <style>
            .nav-tabs>.active>a, .nav-tabs>.active>a:hover, .nav-tabs>.active>a:focus {
                background-color: pink;
            }
            .pageSecTitle,.sel td:nth-child(2) {
                border: 0;
            }
            td select {
                vertical-align: top;
            }

       </style>
        <script>
            //controller for tabs
            var app = angular.module('plunker', ['ui.bootstrap']);
            app.controller("TabsParentController", function ($scope) {
                var setAllInactive = function() {
                    angular.forEach($scope.workspaces, function(workspace) {
                        workspace.active = false;
                    });
                };
                $scope.workspaces =
                        [
                            { id: 1, name: "Tab1", active:true},
                            { id: 2, name: "Tab2", active:false},
                            { id: 3, name: "Tab3", active:false}
                        ];
                $scope.addWorkspace = function () {
                    setAllInactive();
                };
            });
            app.controller ("TabsChildController", function($scope, $log){
            });
         </script>
    </head>
    <body>
    <br><br>
    <div ng-controller="TabsParentController">
        <tabset>
            <tab ng-repeat="workspace in workspaces"
                 heading="{{workspace.name}}"
                 active=workspace.active>
                <div ng-controller="TabsChildController">
                    --some dynamic content here--
                </div>
             </tab>
        </tabset>
    </div>
    </body>
    </html>

In your css have you tried adding '!important'? Like so: .nav-tabs>.active>a, .nav-tabs>.active>a:hover, .nav-tabs>.active>a:focus { background-color: pink !important; } — Mickers, Dec 02 '16 at 21:12
@Mickers - Yes, i was trying the way the tab looks in the attached image with rounded corners and highlighting the selected tab which i could not able to achieve. — javaUser, Dec 02 '16 at 21:17
No! Don't use `!important`, avoid it always. It is meant to be used in _user_ style sheets, not _author_ style sheets. If you have to use _important_ then you have more to learn about selector specificity. — Stephen P, Dec 02 '16 at 21:20
Slanted sides like in your image requires more than `border-radius`. There are several techniques, including `:before` and `:after`, or using CSS 3D transforms. Here are a couple of previous SO questions: http://stackoverflow.com/questions/16825042/how-to-create-slanted-tabs-with-a-border-in-css and http://stackoverflow.com/questions/8895273/how-to-make-angled-tab-like-this-using-css — Stephen P, Dec 02 '16 at 21:24

score 0 · Answer 1 · answered Dec 02 '16 at 21:22

Try adding this css rule to the css you already have:

.nav-tabs>li>a, .nav-tabs>li>a:hover, .nav-tabs>li>a:focus {
    border: 1px solid red;
}

It should add a red border for all inactive tabs. You can add a border to the active tab by adding to the css rule you currently use to set the background pink.

rounded corners and highlight the selected one

1 Answers1