選択キャレットデザインを変更する

select要素のキャレットのデザインを変更する際に問題があります。 select要素を作成しましたが、キャレットのデザインが同じではありません。選択キャレットデザインを変更する

キャレットのデザインを変更することはできますか？ここで

はデザインです。ここ

私のコードです：

.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>

任意の助けをいただければ幸いです！

出典

2017-12-15 Elvin Mammadov

出力の種類はいくつですか？ – Bhargav

出力情報は必要ありません。画像のようにキャレットデザインを変更する必要があります。@Bhargav –

すべてのブラウザをサポートする方法はありますか？js @weBerなし –

は、この方法を試してください。

私は.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; 
     }

.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; 
 
     }

<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>

出典

2017-12-15 10:16:06 Elshad

はい！ Actuallayそれは私が欲しいものです。どうもありがとう！ –

助けてくれると嬉しいです！） – Elshad

このコードに

変更あなたの.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>

を試してみてください

出典

2017-12-15 10:17:17 Bhargav

クリックすることはできますが、イメージデザインと同じではありません。 –

選択キャレットデザインを変更する

答えて

関連する問題