Question

input标签 css设置

css定义 html标签input

但单选 和多选 按钮 想和 其他input域区分设置

问 可否直接设置css 针对input （非定义样式套用）
可否用css选择器 区分单选和多选 ？

input {
font-size: 12px;
height: 16px;
border: 1px solid #1675AD;
margin: 0px;
padding: 0px;
}

Answer 1

设置的方法和详细的操作步骤如下：

1、第一步，使用sublime
 text2创建一个用于测试的新HTML页面，见下图，转到下面的步骤。

2、第二步，完成上述步骤后，在网页上添加标签和输入框，见下图，转到下面的步骤。

3、第三步，完成上述步骤后，预览效果，可以知道默认宽度为10，见下图，转到下面的步骤。

4、第四步，完成上述步骤后，通过设置size属性来修改宽度，见下图，转到下面的步骤。

5、第五步，完成上述步骤后，再次预览效果，宽度减小了，见下图，转到下面的步骤。

6、第六步，完成上述步骤后，如果修改其他内容需要添加“style”属性，见下图，转到下面的步骤。

7、第七步，完成上述步骤后，预览最终效果，可以看到宽度和高度已更改，见下图。这样，就解决了这个问题了。

Answer 2

可以用选择器来做，但CSS不能直接区分radio和checkbox，这个需要有父选择器来控制。

举例说明一下：

<div class="radio">
<input type="radio" value="单选1" />单选1
<input type="radio" value="单选2" />单选2
<input type="radio" value="单选3" />单选3
</div>

<div class="checkbox">
<input type="checkbox" value="复选1" />复选1
<input type="checkbox" value="复选2" />复选2
<input type="checkbox" value="复选3" />复选3
</div>

CSS定义：
/*---单选样式--*/
.radio input{
width:40px;
border:#ff0000 1px solid;
}

/*---多选样式--*/
.checkbox input{
width:100px;
border:#0000ff 1px solid;
}

Answer 3

在input标签中加入 style属性
例如：
<input type="text" style="width: 171px ; height: 80px" />

也可以在css文件中
input{
width: 100%;

height: 100%;
}

Answer 4

checkbox 用css不好定义的
能够定义border和background
但是 定义之后会不好看的

楼上那位写的代码 也有问题
width那么长
checkbox一般就是个15px左右的正方形

搞个40px