Question

我想在chrome和mozilla浏览器中创建具有相同样式的选择框。我设计了我想要的选择框。它在chrome中运行良好但是在mozilla中“select”箭头显示为button.I想要为mozilla编写css

from pexpect import pxssh
import getpass
try:
    s = pxssh.pxssh()
    hostname = raw_input('hostname: ')
    username = raw_input('username: ')
    password = getpass.getpass('password: ')
    s.login(hostname, username, password)
    s.sendline('uptime')   # run a command
    s.prompt()             # match the prompt
    print(s.before)        # print everything before the prompt.
    s.sendline('ls -l')
    s.prompt()
    print(s.before)
    s.sendline('df')
    s.prompt()
    print(s.before)
    s.logout()
except pxssh.ExceptionPxssh as e:
    print("pxssh failed on login.")
    print(e)

select{
	border:1px solid #ffffff;
	background-color: #8b3ca8;
	color:#ffffff;
	height:30px;
	font-size:10pt;
	/*width: 150px; 
	margin-left: 8px; */
	width: 199px;
    margin-left: 13px;
}

Demo

Answer 1

将-moz-appearance设置为none。这将“重置”元素的样式;
将text-indent设置为0.01px。这将把文本“推”到右边一点点;
将text-overflow设置为''（空字符串）。这会将超出元素宽度的任何内容更改为...... nothing

select{
	border:1px solid #ffffff;
	background-color: #8b3ca8;
	color:#ffffff;
	height:30px;
	font-size:10pt;	
	width: 199px;
    margin-left: 13px;
    -moz-appearance: none;
    text-indent: 0.01px;
    text-overflow: '';
}

<select>
<option>option1</option>
<option>option2</option>
<option>option3</option>
</select>

Answer 2

试试这个

.selectWrap select {
  border: 1px solid #ffffff;
  background-color: #8b3ca8;
  color: #ffffff;
  height: 30px;
  font-size: 10pt;
  width: 199px;
  margin-left: 13px;
  -moz-appearance: none;
  -webkit-appearance: none;
}
.selectWrap{
  position: relative;
  display:inline-block
}
.selectWrap::before {
    content: '';
    display: block;
    border: 5px solid transparent;
    border-top-color: #fff;
    position: absolute;
    right: 10px;
    top: calc(50% - 2px);
}

<div class="selectWrap">
  <select>
    <option>option1</option>
    <option>option2</option>
    <option>option3</option>
  </select>
</div>

Answer 3

尝试使用Font Awesome和Pseudo元素。

select {
    border:1px solid #ffffff;
    background-color: #8b3ca8;
    color:#ffffff;
    height:30px;
    font-size:10pt;
    width: 199px;
  margin-left: 13px;
  padding: 0 5px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.select {
  width: 199px;
  position: relative;
}

.select:before {
  content: '\f0d7';
  font-family: 'FontAwesome';
  color: #fff;
  display: inline-block;
  position: absolute;
  right: -5px;
  top: 5px;
  pointer-events: none;
  z-index: 1;
}

demo

用于mozilla浏览器的选择框的CSS

3 个答案: