先上代码:

 .selectData{
height: 0.42rem; position: absolute;
right:.28rem;
top:.30rem;
//去边框
border: none;
outline: none;
//圆角
-moz-border-radius:0.5rem;
-webkit-border-radius:0.5rem;
border-radius:0.5rem; background-color: #003366;
select{
border: none;
outline: none;
line-height: 0.40rem;
//通过padding-left的值让文字居中
padding-left:0.1rem;
background: none;
color: #ffffff; font-style: normal;
font-weight:bold;
}
option{
border: none;
outline: none;
background-color: #003366;
color: #ffffff;
font-weight:bold;
}
}

思想就是

用css美化select框的更多相关文章

  1. 只用CSS美化选择框

    只用CSS美化选择框 2012-03-02 11:04 by iBlog, 26240 阅读, 14 评论, 收藏, 编辑 <本文译自Style a Select Box Using Only ...

  2. css美化select标签,兼容ie10 ie10+,chrome。但不支持ie9 ie9-

    让ie9 ie9+ 和非ie的浏览器加载这个hack.ie8,ie8- 就用自己的默认样式 <!-- email:416960428@qq.com author:李可 --> <!- ...

  3. jquery美化select,自定义下拉框样式

    select默认的样式比较丑,有些应用需要美化select,在网上找到一个很好的美化样式效果,本人很喜欢,在这里分享一下. <!DOCTYPE html PUBLIC "-//W3C/ ...

  4. 用纯css改变下拉列表select框的默认样式(不兼容IE10以下)

    在这篇文章里,我将介绍如何不依赖JavaScript用纯css来改变下拉列表框的样式.     事情是这样的,您的设计师团队向您发送一个新的PSD(Photoshop文档),它是一个新的网站的最终设计 ...

  5. 用纯css改变下拉列表select框的默认样式

    http://ourjs.com/detail/551b9b0529c8d81960000007 在这篇文章里,我将介绍如何不依赖JavaScript用纯css来改变下拉列表框的样式. 问题的提出 事 ...

  6. 纯css改变下拉列表select框的默认样式

    下列CSS就可以解决,原理是将浏览器默认的下拉框样式清除,然后应用上自己的,再附一张向右对齐小箭头的图片即可. select { /*Chrome和Firefox里面的边框是不一样的,所以复写了一下* ...

  7. [转载]用纯css改变下拉列表select框的默认样式

    在这篇文章里,我将介绍如何不依赖JavaScript用纯css来改变下拉列表框的样式. 问题的提出 事情是这样的,您的设计师团队向您发送一个新的PSD(Photoshop文档),它是一个新的网站的最终 ...

  8. 用纯css改变下拉列表select框的默认样式(转)

    用纯css改变下拉列表select框的默认样式 分享到 分类 JS学习   关键字 前端   发布 kris  2015-04-01 注意 转载须保留原文链接,译文链接,作者译者等信息.     在这 ...

  9. 点击盒子选中里面的单选框,并给盒子添加相应样式,美化单选框、复选框样式css用法,响应式滴

    pc效果图: 移动端效果图: 代码直接上: <!DOCTYPE html> <html> <head> <meta http-equiv="Cont ...

随机推荐

  1. java 封装返回结果实体类 返回结果以及错误信息

    public class ResponseMessage { private final static String STATUS_OK = "0"; private final ...

  2. nodeJs 初学案例摘要

    在学习nodeJs的时候,照着文档做的,但是到最后的上传文件显示图片总是报错, 所用的fs.renameSync出错:Error: EXDEV, cross-device link not permi ...

  3. zabbix (二)安装

    一.centos7源码安装zabbix3.x 1.安装前环境搭建 下载最新的yum源 #wget -P /etc/yum.repos.d http://mirrors.aliyun.com/repo/ ...

  4. l2_multi.py

    # Copyright 2012-2013 James McCauley # # Licensed under the Apache License, Version 2.0 (the "L ...

  5. IDEA使用(03)_git撤回(已经commit未push的)操作

    1.问题来源 日常工作中会遇到 commit 到本地仓库的代码,因为一些原因,需要撤销后再提交到本地,或者需要整合多次 commit,然后 push 到远程仓库. 2.IDEA解决方案 I.在idea ...

  6. php实现excel单元格合并,字体加粗居中等操作

    使用的是phpexcel,基本用的原生语法,所见即所得,直接复制下面代码,即可: // 引用phpexcel类 $this->load->library('PHPExcel'); // 创 ...

  7. PHP uploadify io error错误如何解决?

    首先说结论吧,这个问题不是很好解决,因为因素很多,只能一步一步排除. 一般原因是: 方法一: 用php+apache上传文件的时候,由于文件过大,容易导致上传失败,解决办法: 修改php.ini中: ...

  8. CDH 安装的博客地址记录

    1. 集群环境配置 https://www.cnblogs.com/yinzhengjie/articles/11019333.html 2. 二进制方法安装 https://www.cnblogs. ...

  9. PorterDuffXfermode之Mode.SRC_IN

    package com.loaderman.customviewdemo.view; import android.content.Context; import android.graphics.B ...

  10. Dubbo -- 关于 api接口调用不使用强依赖

    首先,我们都知道  Dubbo 调用api 需要提供暴露  接口,   消费端才通过 ZK 可以调用 通常我们都会使用 提供 api  jar包 的方式 使用  这样既方便又快捷 简单 只需要在spr ...