vue项目中直接用的audio标签,对样式进行修改并单独存放在一个css文件中 引用后页面每次刷新之后才会出现
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue项目中直接用的audio标签,对样式进行修改并单独存放在一个css文件中 引用后页面每次刷新之后才会出现相关的知识,希望对你有一定的参考价值。
在代码中我是直接写的audio标签,修改的样式是存在一个css文件中,但是每次我的页面打开之后只会出现audio默认的样式,只有手动点击刷新之后修改的样式才会出现,试了各种方法都不管用,求大神指点!!!
参考技术A style中可以import sass文件,css用得少,需要配置一下
如何修改select标签的默认下拉箭头样式?
对于一般的项目而言,select标签在浏览器中表现出来的默认样式也不算丑,但是一次项目中,项目经理却要求对select标签本身进行样式修改,美化其下拉小箭头的样式。我思考和尝试了许多方法,最终得到一种能够兼容chrome、360、火狐、搜狗、IE10+等浏览器的最佳方案。废话不多说,实现原理如下:
html结构:
1 <div class="box"> 2 <select id="choice"> 3 <option value="000">请选择</option> 4 <option value="371">河南</option> 5 <option value="372">河北</option> 6 </select> 7 <img src="arrow-3.png" alt="" id="arrow2"> 8 </div> 9 <label for="userName">姓名</label><input type="text" placeholder="请输入姓名" id="userName">
css样式:
1 .box{ 2 width: 200px; 3 height: 30px; 4 border: 1px solid #0f0; 5 position: relative; 6 margin-bottom: 100px; 7 } 8 #choice{ 9 position: absolute; 10 top: 0; 11 left: 0; 12 z-index: 4; 13 width: 200px; 14 height: 30px; 15 border: 0; 16 /*outline: none;*/ 17 18 appearance: none; 19 -moz-appearance: none; 20 -webkit-appearance: none; 21 background-color: transparent; 22 } 23 select::-ms-expand { 24 display: none; 25 } 26 img{ 27 width: 30px; 28 height: 20px; 29 position: absolute; 30 top: 5px; 31 right: 0; 32 z-index: 2; 33 transition:all 0.2s; 34 }
js代码:
1 <script src="jquery.js"></script> 2 <script> 3 4 $("#choice").focus(function(){ 5 $("#arrow2").css({ 6 transform:"rotate(180deg)" 7 }); 8 }); 9 $("#choice").blur(function(){ 10 $("#arrow2").css({ 11 transform:"rotate(0deg)" 12 }); 13 }); 14 15 $("#choice").on("change",function(){ 16 $("#choice").blur(); 17 $("#arrow2").css({ 18 transform:"rotate(0deg)" 19 }); 20 }); 21 22 </script>
好了,本方法还存在一些不完美,欢迎各位小伙伴跟帖补充,我会及时完善博客,助人助己。
以上是关于vue项目中直接用的audio标签,对样式进行修改并单独存放在一个css文件中 引用后页面每次刷新之后才会出现的主要内容,如果未能解决你的问题,请参考以下文章