Nishant Roy Nishant Roy - 1 year ago 80
CSS Question

Label text messed up with Pure CSS select

PLNKR example of problem

The label reads Group By, but the letters are all superimposed for some reason.

Here is the HTML:

<!DOCTYPE html>
<html lang="en">

<meta charset="UTF-8">
<title>Label font</title>

<script src=""></script>

<link rel="stylesheet" href="">
<script src="script.js"></script>
<link rel="stylesheet" href="style.css">

<link rel="stylesheet" href="//">


<body ng-app="app">

<div ng-controller="UICtrl">

<form class="pure-form pure-form-aligned">

<div class="pure-g">
<div class="pure-u-md-1">
<label for="graphType">Group By: </label>
<select id="graphType" class="pure-input-1">
<option disabled selected value> -- Select a Graph Type --</option>
<option> Graph type 1 </option>




The problem goes away if I don't use the Pure CSS library. Is there anyway I can have the label font without messing up while keeping the Pure CSS?

Answer Source

You can customize your label css

label {
   letter-spacing: 0.1em;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download