css controls

CSS controls，或者称为CSS控件，是前端开发中常用的一种技术，它们允许开发者在网页上添加各种交互式元素，例如按钮、选择器、滑块、弹出窗口等等。下面我们将介绍一些常见的CSS控件。

/* 按钮 */
button{
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

/* 选择器 */
select{
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  Box-sizing: border-Box;
}

/* 滑块 */
input[type="range"]{
  -webkit-appearance: none;
  width: 100%;
  height: 10px;
  border-radius: 5px;
  background: #bdc3c7;
  outline: none;
}

input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #16a085;
  cursor: pointer;
}

/* 弹出窗口 */
/* 模态框 */
.modal{
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0);
  background-color: rgba(0,0.4);
}

/* 模态框内容 */
.modal-content{
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

/* 关闭按钮 */
.close{
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,.close:focus{
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

这些CSS控件是开发网页时不可或缺的工具，它们可以使网页更具交互性和可操作性。通过掌握这些控件的用法，我们可以创建各种炫酷的网页。