单选框样式更改问题

Question

这种效果应该怎么设置呢，我做出来的是这样的
，

选框和文字不能对齐，颜色也不对。并且感觉人家要求应该是单选框，但是单选框是圆形的，更不一样了。

我是这样写的：

<span>产品搜索</span>

<form method="post" action="">

<input type='checkbox' name="title"value='title'>

<label name='title'>按题目</label>

<input type='checkbox' name="title"value='content'>

<label name='content'>按内容</label>

<input type='text' class="search_box">

<input type='button' name='search' value='搜索'>

</div>

#search form{

float:left;

margin-left: 5px;

}

#search form label{

color: #fff;

}

input[type="checkbox"]{

margin: 7px 0px 0px 15px;

}

input[type='text']{

width:186px;

height: 20px;

margin-right: 15px;

padding:0 5px;

}

input[type='button']{

color: red;

padding:3px 13px;

background-color: #fff;

}

Answer 1

可以使用-webkit-appearance: checkbox; 来将单选框radio显示为checkbox的样式,其实你精心调试的高度换个浏览器甚至在同浏览器的不同版本中也可能会渲染出不同的效果,input标签已经高度组件化,没有必要尝试重新开发