今天完成的事件

问题

在这设置这个远点图片的时候不太清楚怎么实现的 师兄提醒是用border与padding实现的  中间的空白处是padding内框而圆圈是用border直接给颜色就行了。

在点击圆圈的时候用hover鼠标悬停触发颜色改变事件，如图 而其他师兄都是点击颜色也不消失。

解决方案：focus选择器

意思是一个输入字段获得焦点的选择样式：

这里要注意下，它只对接收键盘输入事件或者是其他用书输入事件以及有按钮效果如A标签，Button按钮才有用，如果用DIV或者其他的块状元素或内联元素是没有效果的，它好像是对触发电脑外部像键盘鼠标这样的输入的标签才有效果。

代码如下：

这里要注意下如果你用的是按钮标签，在点击的时候会出席自带边框outline这个属性是用来消除自按钮自带边框，我直接把它改变成白色与背景颜色一样只是视觉上的消失 它本身还是存在那里。

圆圈代码：

}

问题：

这个东西之前用过类似下拉框，<select>标签属性有自带的原版，倒三角是可以消除的。代码如下：

-webkit-appearance: none; 这个代码就是消除原有的倒三角，然后利用背景图片把切到图片贴进去移动位置把消除的位置覆盖掉就OK了。

这里要注意下 不是所以浏览器用这个代码就可以消除，网上查了下说明不同浏览器好像代码是不一样的

百度查询：

（不过对与IE浏览器这个属性好像失效！）

总结：了解到圆圈是画出来的如何画圆圈，以及focus选择器用内联元素或者块状元素等是无效的浪费半天时间，Button按钮的样式消除outline：none，按钮样式也都是浏览器自带的可以消除也可以通过改变颜色来达到隐身的效果，以及知道<select>标签属性改变样式它的倒三角可以通过背景图片进行改变。