单选按钮CSS样式

Question

任何人都可以帮助一些CSS。我有以下内容在Firefox等浏览器中完美运行。但是在Chrome或IE中没有。有些帮助可以指出我正确的方向吗？

我尝试了一些不同的东西但没有获得太多运气。

我正在尝试显示颜色块，然后客户可以单击以更改背景的颜色。我可以使用标准单选按钮执行此操作，但尝试使其更加用户友好。

.colour-select table {
  border-spacing: 5px;
}

.colour-select td:last-child {
  display: none;
}

.colour-select input[type="radio"] {
  cursor: pointer;
  width: 40px !important;
  height: 40px !important;
  margin: 0;
  padding: 0 !important;
  position: relative;
}

.colour-select input[type="radio"]:checked:after {
  position: absolute;
  left: 0;
  top: 1px;
  width: 40px;
  height: 40%;
  display: block;
  text-align: center;
  font-family: FontAwesome;
  font-size: 20px;
}

.colour-select tr:nth-child(1) td:nth-child(1)   input[type="radio"]:checked:after,
.colour-select tr:nth-child(1) td:nth-child(2) input[type="radio"]:checked:after,
.colour-select tr:nth-child(1) td:nth-child(3) input[type="radio"]:checked:after,
.colour-select tr:nth-child(1) td:nth-child(4) input[type="radio"]:checked:after,
.colour-select tr:nth-child(2) td:nth-child(3) input[type="radio"]:checked:after,
.colour-select tr:nth-child(1) td:nth-child(6) input[type="radio"]:checked:after,
.colour-select tr:nth-child(3) td:nth-child(3) input[type="radio"]:checked:after,
.colour-select tr:nth-child(4) td:nth-child(1) input[type="radio"]:checked:after,
.colour-select tr:nth-child(2) td:nth-child(1) input[type="radio"]:checked:after,
.colour-select tr:nth-child(2) td:nth-child(2) input[type="radio"]:checked:after,
.colour-select tr:nth-child(2) td:nth-child(6) input[type="radio"]:checked:after,
.colour-select tr:nth-child(4) td:nth-child(2) input[type="radio"]:checked:after,
.colour-select tr:nth-child(4) td:nth-child(3) input[type="radio"]:checked:after,
.colour-select tr:nth-child(3) td:nth-child(1) input[type="radio"]:checked:after,
.colour-select tr:nth-child(3) td:nth-child(2) input[type="radio"]:checked:after,
.colour-select tr:nth-child(3) td:nth-child(4) input[type="radio"]:checked:after,
.colour-select tr:nth-child(1) td:nth-child(6) input[type="radio"]:checked:after {
  color: #FFFFFF;
}

.colour-select tr:nth-child(1) td:nth-child(1) input[type="radio"] {
  background-color: #01f9ea;
}

.colour-select tr:nth-child(1) td:nth-child(2) input[type="radio"] {
  background-color: #5e5f5f;
}

.colour-select tr:nth-child(1) td:nth-child(3) input[type="radio"] {
  background-color: #3ea648;
}

.colour-select tr:nth-child(1) td:nth-child(4) input[type="radio"] {
  background-color: #1b4621;
}

.colour-select tr:nth-child(2) td:nth-child(1) input[type="radio"] {
  background-color: #cf242a;
}

.colour-select tr:nth-child(2) td:nth-child(2) input[type="radio"] {
  background-color: #751112;
}

.colour-select tr:nth-child(2) td:nth-child(3) input[type="radio"] {
  background-color: #f89520;
}

.colour-select tr:nth-child(2) td:nth-child(4) input[type="radio"] {
  background-color: #fcee27;
}

.colour-select tr:nth-child(3) td:nth-child(1) input[type="radio"] {
  background-color: #f2d48e;
}

.colour-select tr:nth-child(3) td:nth-child(2) input[type="radio"] {
  background-color: #8c6330;
}

.colour-select tr:nth-child(3) td:nth-child(3) input[type="radio"] {
  background-color: #2a327e;
}

.colour-select tr:nth-child(3) td:nth-child(4) input[type="radio"] {
  background-color: #b2c9d5;
}

.colour-select tr:nth-child(4) td:nth-child(1) input[type="radio"] {
  background-color: #3f87c7;
}

.colour-select tr:nth-child(4) td:nth-child(2) input[type="radio"] {
  background-color: #812990;
}

.colour-select tr:nth-child(4) td:nth-child(3) input[type="radio"] {
  background-color: #f06ea9;
}

.colour-select tr:nth-child(4) td:nth-child(4) input[type="radio"] {
  background-color: #f7b5d2;
}


.custom-colour tr:last-child {
  display: none;
}

.colour-picker-button {
  border: 1px solid #C4C4C4;
  margin: 10px 0 5px;
  padding: 0;
  cursor: pointer;
}

.colour-picker-text {
  display: table-cell;
  vertical-align: middle;
  padding: 0 10px;
}

.colour-picker-preview {
  width: 30px;
  height: 30px;
  display: table-cell;
  vertical-align: middle;
}