Question

我在选择元素中更改插入符号的设计时遇到问题。我制作了选择元素但插入符号设计不一样。

是否可以更改插入符号的设计？

这是设计：

这是我的代码：

.sub_domain {
            position: relative;
            margin: 20px;
        }
        .sub_domain input {
            border: 1px solid #e1e1e1;
            box-shadow: none;
            border-radius: 20px;
            padding-right: 94px;
            padding-left: 20px;
        }
        .sub_domain_select {
            position: absolute;
            top: 0;
            right: 0;
            height: 100%;
        }
        .sub_domain_select select {
            border: none;
            height: 100%;
            outline: 0;
            width: 95px;
            padding: 6px 0 6px 10px;
            border-top-right-radius: 2em;
            border-bottom-right-radius: 2em;
            background: #8cc44c;
        }
        .sub_domain_select select {
            color: #fff;
        }
        .sub_domain input {
            border: 1px solid #e1e1e1;
            box-shadow: none;
            border-radius: 20px;
            padding-right: 94px;
            padding-left: 20px;
        }

    <head>
            <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
        </head>
        <body>
            <div class="sub_domain">
                <input type="text" name="domain_name" placeholder="Domain name" class="form-control" maxlength="20" />
                <div class="sub_domain_select">
                    <select name="domain_zone">
                        <option value="com">.com</option>
                        <option value="net">.net</option>
                        <option value="info">.info</option>
                        <option value="org">.org</option> 
                    </select>
                </div>
            </div>
        </body>

任何帮助都将不胜感激！

Answer 1

试试这个：

我改变了.sub_domain_select select课程。我只是删除插入符apperance: none;并添加图像文件而不是。

.sub_domain_select select {
            cursor: pointer;
            color: #fff;
            border: none;
            height: 100%;
            outline: 0;
            width: 75px;
            position: absolute;
            top: 0;
            right: 0;
            padding: 6px 0 6px 10px;
            border-top-right-radius: 2em;
            border-bottom-right-radius: 2em;
            -moz-appearance: none;
            -webkit-appearance: none;
            apperance: none;
            background: #8cc44c url(https://image.ibb.co/noEFC6/arrow.png) 74% / 13% no-repeat;
        }

＆＃13;

.sub_domain {
            position: relative;
            margin: 20px;
        }
        .sub_domain input {
            border: 1px solid #e1e1e1;
            box-shadow: none;
            border-radius: 20px;
            padding-right: 94px;
            padding-left: 20px;
        }
        .sub_domain_select {
            position: absolute;
            top: 0;
            right: 0;
            height: 100%;
        }
        .sub_domain_select select {
            cursor: pointer;
            color: #fff;
            border: none;
            height: 100%;
            outline: 0;
            width: 75px;
            position: absolute;
            top: 0;
            right: 0;
            padding: 6px 0 6px 10px;
            border-top-right-radius: 2em;
            border-bottom-right-radius: 2em;
            -moz-appearance: none;
            -webkit-appearance: none;
            apperance: none;
            background: #8cc44c url(https://image.ibb.co/noEFC6/arrow.png) 74% / 13% no-repeat;
        }
        .sub_domain input {
            border: 1px solid #e1e1e1;
            box-shadow: none;
            border-radius: 20px;
            padding-right: 94px;
            padding-left: 20px;
        }

＆＃13;

<head>
            <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
        </head>
        <body>
            <div class="sub_domain">
                <input type="text" name="domain_name" placeholder="Domain name" class="form-control" maxlength="20" />
                <div class="sub_domain_select">
                    <select name="domain_zone">
                        <option value="com">.com</option>
                        <option value="net">.net</option>
                        <option value="info">.info</option>
                        <option value="org">.org</option> 
                    </select>
                </div>
            </div>
        </body>

＆＃13;

Answer 2

试试这段代码

更改您的.sub_domain_select select css

width: 70px;
padding: 6px 0 6px 8px;

.sub_domain {
  position: relative;
  margin: 20px;
}

.sub_domain input {
  border: 1px solid #e1e1e1;
  box-shadow: none;
  border-radius: 20px;
  padding-right: 94px;
  padding-left: 20px;
}

.sub_domain_select {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
}

.sub_domain_select select {
  border: none;
  height: 100%;
  outline: 0;
  width: 70px;
  padding: 6px 4px 6px 8px;
  border-top-right-radius: 2em;
  border-bottom-right-radius: 2em;
  background: #8cc44c;
}

.sub_domain_select select {
  color: #fff;
}

.sub_domain input {
  border: 1px solid #e1e1e1;
  box-shadow: none;
  border-radius: 20px;
  padding-right: 94px;
  padding-left: 20px;
}

<head>
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
</head>

<body>
  <div class="sub_domain">
    <input type="text" name="domain_name" placeholder="Domain name" class="form-control" maxlength="20" />
    <div class="sub_domain_select">
      <select name="domain_zone">
          <option value="com">.com</option>
          <option value="net">.net</option>
          <option value="info">.info</option>
          <option value="org">.org</option> 
      </select>
    </div>
  </div>
</body>

更改选择插入符号设计

2 个答案: