OpenLayers Style Layerswitcher

HTML

<script src="http://dev.openlayers.org/releases/OpenLayers-2.13.1/OpenLayers.js"></script>
Example for a userdefined Layerswitcher in OpenLayers 
<div id="map"></div>

CSS

#map
{
    width: 700px; 
    height: 350px; 
    border: 1px solid black;    
}

div.olControlLayerSwitcher, div.layersDiv {
    width: 300px !important;
    height: 200px !important;
    
}
.olControlLayerSwitcher 
{
margin-top: 20px !important;
    height: 200px !important;
    width: 200px !important;
}

	
.olControlLayerSwitcher .layersDiv {
    background-color: rgba(34, 34, 34, 0.5) !important; 
    padding: 5px 10px;
	border-radius: 15px 0 0 15px !important;
}

JavaScript

// optional: set ImagePath to hosted example or own folder with user defined images
OpenLayers.ImgPath = "http://js.mapbox.com/theme/dark/";

var map = new OpenLayers.Map("map");
map.addLayer(new OpenLayers.Layer.OSM());
map.zoomToMaxExtent();
var custom_layerswitcher= new OpenLayers.Control.LayerSwitcher();
map.addControl(custom_layerswitcher);

// change Labels of Base- and Overlay-Section
custom_layerswitcher.dataLbl.innerHTML="Thematische Karten";

custom_layerswitcher.baseLbl.innerHTML="Basiskarten";

// Vectorlayer to get the Overlay-Label in the Layerswitcher
var points = [
    new OpenLayers.Geometry.Point(0, 0)
];
// create some attributes for the feature
var attributes = {name: "my name", bar: "foo"};

var feature = new OpenLayers.Feature.Vector(points[0], attributes);
var layer = new OpenLayers.Layer.Vector("Test");
layer.addFeatures([feature]);
map.addLayer(layer);