Change select caret design-Twitter bootstrap

ElvinMammadov
December 15, 2017
206 views
0 votes
2 Answers

I have problem with changing design of caret in select element.
I made select element but caret design is not the same.

Is it possible to change design of the caret?

Here is design:

Here is my code:

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

Any help would be appreciated!

Tags: css html

Answers

Try this one:

I changed .sub_domain_select select class. I just remove caret apperance: none; and add image file instead of.

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

try this code

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

Please signup or login to give your own answer.

Click here to cancel reply.