单选上传按钮的简单修饰

Posted 2020-07-24 月半的我们

//html代码
<div class="operateWays">
     <label>
         <input type="radio" name="Sex">
         <span>男</span>
     </label>
     <label>
         <input type="radio" name="Sex" checked="checked">
         <span>女</span>
     </label>
</div>
//css代码
.operateWays label{
    line-height: 3rem;
    height: 3rem;
    margin-right: 5px;
    position: relative;
}
.operateWays label input[type=\'radio\'],.operateWays label span{
    width: 50px;
    height:3rem;
    margin-top:5px;
}
.operateWays label span{
    position: absolute;
    top: 0px;
    left: 0px;
    display: block;
    text-align: center;
    border: 1px solid #ddd;
    background: #fff;
    color: #666;
    border-radius: 2px;
}
.operateWays label input[type=\'radio\']{
    opacity: 0;
    filter: alpha(opacity=0);   
}
.operateWays label input[type=\'radio\']:checked+span{
    background: #4A943D;
    border-color: #4A943D;
    color: #fff;                    
}
.operateWays label span:hover{
    cursor:pointer;
}

1).单选按钮最终显示的效果:

//css代码
.fileinputBtn {
    height: 35px;
    position: relative;
    width: 80px;
    overflow: hidden;
}
input[type="file"] {
    position: absolute;
    top: 0px;
    left: 0px;
    font-size: 100px;
    opacity: 0;
    filter: alpha(opacity=0);
}
.btn-success{
　　 background-color: #3a9d5d;
    border-color: #3a9d5d;
　　 -webkit-appearance: push-button;
    white-space: nowrap;
    font-size: inherit;
    -webkit-user-modify: read-only;
    margin: 0px;
}
//html代码
<div class="fileinput-button fileinputBtn btn btn-success">
    <input type="file" name="AdPicture" data-upload-type="IMAGE" accept="image/*">
    上传文件
</div>

2).上传按钮最终显示的效果是:

3).这是一段纯css清楚浮动:

/*清除浮动效果*/
.clearfix:after{
   content:"020";//或者使用"."来代替
   display:block;
   height:0;
   clear:both;
   visibility:hidden;
}
.clearfix{
    zoom:1;
}

4).bootstrap中清除浮动:

// Mixin itself
.clearfix(){&:before,&:after{content:" ";display:table;}&:after{clear:both;}}// Usage as a mixin
.element{.clearfix();}

5).css中伪类和伪元素的区别:

　　a.伪类:用于向某些选择器添加特殊的效果(可以用来指定一个或者多个语气相关的选择符的状态)

　　b.伪元素:用于将特殊的效果添加到默写选择器中(是指在HTML的文档指定的信息之外，创建了文档的额外信息。（选择符:伪对象{属性：属性值}）)

    

6).css中基本字体引用格式

基本的格式是: 
　　@font-face {
　　　　font-family: <YourWebFontName>;
　　　　src: <source> [<format>][,<source> [<format>]]*;
　　　　[font-weight: <weight>];
　　　　[font-style: <style>];
　　}

取值的简单说明:
　　YourWebFontName:是指你自定义的字体名称
　　source:指你自定义的字体的存放路径
　　format:指你自定义字体的格式
　　weight/style:前者是定义字体的粗体,后者是定义字体样式

/*为了让各个浏览器支持的写法*/
@font-face { 
　　font-family: \'YourWebFontName\'; 
　　src: url(\'YourWebFontName.eot\'); 
　　src: url(\'YourWebFontName.eot?#iefix\') format(\'embedded-opentype\'), 
　　　　url(\'YourWebFontName.woff\') format(\'woff\'), 
　　　　url(\'YourWebFontName.ttf\') format(\'truetype\'), 
　　　　url(\'YourWebFontName.svg#YourWebFontName\') format(\'svg\'); 
}

 

7).设置隐藏并使用背景图片来修饰：

　   selected::-ms-expand————下拉框(ie中删除select的方法)

　　input::-ms-check————单选、复选框

　　input::-ms-clear————表单文本框　　

　　-moz-appearance:none; -webkit-appearance:none;————下拉框删除默认背景图片

 

8).在解决type="number"的问题上:

      a.移除type="number"在浏览器中显示出来的上下箭头

　　　　1.在谷歌上:

1 input::-webkit-outer-spin-button,
2 input::-webkit-inner-spin-button{
3     -webkit-appearance: none !important;
4     margin: 0; 
5 }

　　　2.在火狐上:

1 input[type="number"]{
2     -moz-appearance:textfield;
3 }

　　b.在解决type=\'number\'的问题上,如果再苹果手机解决不了的时候,可以通过使用type=\'tel\'来做替换操作