html单选框怎么设置位置

html-css016

html单选框怎么设置位置,第1张

html单选框怎么设置位置方法是:

1、使用CSS的position属性来控制html单选框的位置。

2、CSS中的position属性有static、relative、absolute和fixed等几种值,结合top、left、right、bottom属性等可以把html元素精确的定位到指定的位置上。

1、首先打开编辑器,然后新建一个html文件,编写入基本的框架。

2、然后用form,input和label创建一个单项选择题。

3、创建一个新的css文件,并且用link标签关联HTML文件。

4、然后撤销一下原来按钮的样式。

nput[type="radio"] {

  display: none

}

5、nput[type='radio'] + label:before{

  content: ""

  display: inline-block

  width: 20px

  height: 20px

  border: 2px solid gold

}

首先设置未点击的单选框样式,用border来设置颜色。

6、nput[type='radio']:checked + label:before{

  background-color: red

}

接着设置点击后的背景颜色,这里用background-color。

7、最后运行一下,完成效果图。

三、单选:radio

1.首先是定位选择框的位置

2.定位id,点击图标就可以了,代码如下(获取url地址方法:把上面源码粘贴到文本保存为.html后缀后用浏览器打开,在浏览器url地址栏复制出地址就可以了)

3.先点击boy后,等十秒再点击girl,观察页面变化

四、复选框:checkbox

1.勾选单个框,比如勾选selenium这个,可以根据它的id=c1直接定位到点击就可以了。

2.那么问题来了:如果想全部勾选上呢?

五、全部勾选:

1.全部勾选,可以用到定位一组元素,从上面源码可以看出,复选框的type=checkbox,这里可以用xpath语法:.//*[@type='checkbox']

2.这里注意,敲黑板做笔记了:find_elements是不能直接点击的,它是复数的,所以只能先获取到所有的checkbox对象,然后通过for循环去一个个点击操作

六、判断是否选中:is_selected()

1.有时候这个选项框,本身就是选中状态,如果我再点击一下,它就反选了,这可不是我期望的结果,那么可不可以当它是没选中的时候,我去点击下;当它已经是选中状态,我就不点击呢?那么问题来了:如何判断选项框是选中状态?

2.判断元素是否选中这一步才是本文的核心内容,点击选项框对于大家来说没什么难度。获取元素是否为选中状态,打印结果如下图。

3.返回结果为bool类型,没点击时候返回False,点击后返回True,接下来就很容易判断了,既可以作为操作前的判断,也可以作为测试结果的判断。