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文件中 引用后页面每次刷新之后才会出现的主要内容,如果未能解决你的问题,请参考以下文章

vue项目中audio标签本地引入的音乐无法播放

解决vue ssr css内联样式和link标签重复问题

vue在脚手架index.css中修改样式不生效

如何修改select标签的默认下拉箭头样式?

vue3 自定义 audio音频播放效果

[js开源组件开发]html5标签audio的样式更改