怎么新建MySQL数据库
阅读：665
今天给大家分享的是关于css日期选择器的内容，css日期选择器的需求还是比较常见的，在一些注册页面或者是查询页面等等都可以使用到。那么下面给大家分享的实例就是实现css日期选择器选中区域的文字加粗，这样的好处的就是能更明显突出所选的日期，那么具体怎样实现呢？接下来跟随小编一起看看吧。
在封装日期选择器时，需要选中时字体颜色加深，先看一下实现后的效果
可以看到加深的不是整个文字，而是中间那片区域今天聊的重点不在选择器的封装，主要看这个样式效果，想了解此组件的实现思路可以看之前的文章日期选择器实现思路：
1.首先它是进入所在区域颜色就会加深，不是整个字体，所以我们就不能从选中是改变文字样式着手了，看到是区域首先想到的就是蒙层了
2. 可是蒙层实现中间颜色变浅容易，就加蒙层+透明+定位就好，那如何加蒙层中间颜色反而变深呢，如果纠结从选中部分解决颜色加深的效果将会陷入深思。。。
3. 我们知道颜色变浅色容易那就让除了中间选中部分之外的都加蒙层使颜色变浅，到选中部分的自然都是深色了
4. 确定了要给上下加蒙层之后，又有问题需要考虑，如果加了蒙层在上面，还可以触发touchmove滚动吗？这里就想到了sticky定位
首先sticky不会脱离流文档，那么触发touchmove依旧是触发的此盒子内
代码实现：
//html结构
<body>
<div class="box">
<p class="top"></p>
<p class="one">123123</p>
.....此处省略很多个
<p class="one">123123</p>
<p class="bottom"></p>
</div>
</body>
//样式
<style>
.box{
margin-top: 100px;
height: 420px;
width: 300px;
position: relative;
background-color: fff;
overflow: auto;
border: indigo 1px solid;
}
p{
margin:0;
height: 20px;
text-align: center;
}
//上下和加一个蒙层 背景白色 加上透明度 使遮挡的文字颜色变浅
.top{
height: 200px;
background-color: #fff;
position: sticky; //*******关键代码
top: 0; //*******关键代码
opacity: .4; //*******关键代码
}
.bottom{
height: 200px;
background-color: #fff;
position: sticky;
bottom: 0;
opacity: .4;
}
</style>
实现效果：
关于实现css日期选择器选中区域的文字加粗的效果就介绍到这，上述实例具有一定的借鉴价值，感兴趣的朋友可以参考学习，希望能对大家有帮助，想要了解更多css日期选择器的使用技巧，大家可以关注群英网络其它相关文章。
文本转载自脚本之家
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。
相关阅读
长按识别二维码并关注微信
更方便到期提醒、手机管理