如何设置带有图像和没有任何标签的收音机盒

时间:2016-03-13 16:30:10

标签: html css

我有一张桌子,这张桌子的一列只是收音机盒子。 我想用下面的图像设计收音机盒的样式: http://i66.tinypic.com/28ipw1s.png http://i64.tinypic.com/2ur1b88.png

或者只是设置样式,使它看起来很正常,而不是浏览器的默认样式。 问题是上面显示图像的解决方案可以通过使用标签来实现,标签占据了我不想放弃的表格空间。 这是我的表: enter image description here

我无法添加任何标签,我不想在我的radiobox旁边贴上任何标签。 这是我熟悉的解决方案,它不适用于空标签。

<form method="post">
Your Email: <input name="email" type="text" /><br /> 
<br />
Subject  :    <input name="subject" type="text" /><br /> 
<br /> 
What needs to be done?<br />
<input  name="check_list[]" type="checkbox" value="Fix a broken link">Fix a broken link<br /><br />
<input  name="check_list[]" type="checkbox" value="Information on a web page needs to be updated">Information on a web page needs to be updated<br /><br />
<input  name="check_list[]" type="checkbox" value="Information needs to be added to a web page">Information needs to be added to a web page<br /><br />
Description:<br />
<textarea name="comments" rows="15" cols="40"></textarea><br /> 
<br />
<input type="submit" value="Submit" /> 

1 个答案:

答案 0 :(得分:1)

这样的东西?

input[type="radio"] {
  width: 17px;
  margin: 0;
  padding: 0;
  background: url(http://i66.tinypic.com/28ipw1s.png) no-repeat 0 0;
  -webkit-appearance: none;
  appearance:none;
  -moz-appearance:none; 
  display: inline-block;
  height: 17px; 
  outline:none;
}

input[type="radio"]:checked {
  background: url(http://i64.tinypic.com/2ur1b88.png) no-repeat 0 0;
}
<input type="radio" name="" value="">