Drag and drop style text

Question

Trying to figure out a problem with a stylized selection field. It is wrapped in a div with a background to create a mask - look at it.

When there is too much text in the input, it will overflow with a button.

HTML:

<div class="styled-select">
    <select  class="form-control required" name="address" disabled>
        <option style="" value="">Please Select Address</option>
    </select>
</div>

CSS

    .styled-select select {
    font-family: "Circular", Helvetica, Arial, sans-serif;
    font-size: 18px;
    background: transparent;
    width: 100%;
    padding: 15px;
    font-size: 16px;
    line-height: 1;
    border: 0;
    height: 50px;
    border-radius: 10px;
    -webkit-appearance: none;
    padding-right: 10%;
}

.styled-select { 
    width: 100%; 
    overflow: hidden; 
    background: url(../images/bg/down-arrow.jpg) no-repeat right #FFF; 
    background-size: 60px; 
    height: 50px; 
    border-radius: 10px; 
}

@media (min-width: 768px) {
    .styled-select select {
    font-family: "Circular", Helvetica, Arial, sans-serif;
    font-size: 18px;
    background: transparent;
    width: 100%;
    padding: 18px;
    font-size: 18px;
    line-height: 1;
    border: 0;
    height: 55px;
    border-radius: 10px;
    -webkit-appearance: none;
    padding-right: 10%;
}

.styled-select { 
    width: 100%; 
    overflow: hidden; 
    background: url(../images/bg/down-arrow.jpg) no-repeat right #FFF; 
    background-size: 60px; 
    height: 55px; 
    border-radius: 10px; 
}

Can anyone solve this?

Answer 1

The problem is what you use padding-right: 10%;in your css for yourself select. Image measurement - the choice is approximately 270pxwide, doing 10%only width 27px- this is correct by my standards.

, background-image 60px , padding-right: 78px; ( 60px width 18px, padding ).

Answer 2

Fiddle

.styled-select select {
    font-family: "Circular", Helvetica, Arial, sans-serif;
    font-size: 18px;
    background: transparent;
    width: 100%;
    padding: 15px;
    font-size: 16px;
    line-height: 1;
    border: 0;
    height: 50px;
    border: 1px solid #0082ff; /* Just to see the area of the form in white bg */
    border-radius: 10px;
    -webkit-appearance: none;
        padding-right: 55px;
    box-sizing: border-box;
}

.styled-select { 
    width: 200px; 
    overflow: hidden; 
    background: url(http://emojipop.net/data/images/emoji_set_651.png) no-repeat right #FFF; 
    background-size: 50px; 
    height: 50px; 
    border-radius: 10px; 
    text-overflow: ellipsis;
}

@media (min-width: 768px) {
    .styled-select select {
    font-family: "Circular", Helvetica, Arial, sans-serif;
    font-size: 18px;
    background: transparent;
    width: 100%;
    padding: 18px;
    font-size: 18px;
    line-height: 1;
    border: 0;
    height: 55px;
    border-radius: 10px;
    -webkit-appearance: none;
    padding-right: 10%;
}

.styled-select { 
    width: 100%; 
    overflow: hidden; 
    background: url(http://emojipop.net/data/images/emoji_set_651.png) no-repeat right #FFF; 
    background-size: 60px; 
    height: 55px; 
    border-radius: 10px; 
}

<div class="styled-select">
    <select  class="form-control required" name="address">
        <option style="" value="">Please Select Address</option>
        <option style="" value="">Please Select Address2</option>
        <option style="" value="">Please Select Address3</option>
    </select>
</div>

Hide result

Answer 3

- , , HTML-. , , . , , . , , . (.select - , )

.selectButton {
display: block;
position: absolute;
height: 100%;
width: 20%;
max-width: 40px;
background: blue;
z-index: 12;
right: 0;
top: 0;
box-shadow: -24px 0px 30px rgba(255, 255, 255, 1);

}

, , , .

, , div - select , -: none; , , .

, , , , , . , , .

, !

!

---

css . psuedo , bg- z-, , , .

.styled-select { 
    /*have this create the size of the select*/
    width: 100%; 
    overflow: hidden; 
    background-repeat: no-repeat;
    -webkit-background-size: 80% 80%;
    background-size: 80% 80%;
    height: 50px;
    position: relative;
}
.style-select::before {
    content: '';
    display: block;
    position: absolute;
    right: 0;
    background-color: $blue;
    top: 50%;
    transform: translateY(-50%);
    width: 60px;
    height: 100%;
    background: url(../images/bg/down-arrow.jpg); 
    /* ^^^^ use this as just the white arrow png ^^^ */
    box-shadow: -24px 0px 30px rgba(255, 255, 255, 1);
    pointer-events: none;
}

Answer 4

:

.styled-select select {
  white-space: nowrap; 
  width: 10em; 
  overflow: hidden;
  text-overflow: ellipsis;
}

Answer 5

, :

, , BG ' . 60px, :

.styled-select select{
  width: calc( 100% - 60px / 2); //before was width: 100%;
  text-overflow: ellipsis;
}

@media (min-width: 768px) {
  .styled-select select {
    width:100%; //remove it, only one in the mobile first declarationis needed
  }
}

CSS, .

Answer 6

(10%) padding-right select . background-size .styled-select (60 ).

, .styled-select 600 , select background-image - , , , .

, , padding-right , background-size , background-image.

, CSS; -, , .

.styled-select{
  background:#fff linear-gradient(0deg,#00f,#00f) right / 60px repeat-y;
/** DELETE LINE ABOVE AND UNCOMMENT LINE BELOW **/
/*  background:#fff url(../images/bg/down-arrow.jpg) right center / 60px no-repeat;*/
  border-radius:10px;
  height:50px;
  overflow:hidden;
  width:100%;
}
.styled-select select{
  -webkit-appearance:none;
  background:transparent;
  border:0;
  border-radius:10px;
  font-family:Circular,Helvetica,Arial,sans-serif;
  font-size:16px;
  height:50px;
  line-height:1;
  padding:15px 75px 15px 15px;
  width:100%;
}
@media (min-width:768px){
  .styled-select{
    height:55px;
  }
  .styled-select select{
    font-size:18px;
    height:55px;
    line-height:1;
    padding-right:78px;
  }
}
body{
  background:#003;
}

<div class="styled-select">
  <select class="form-control required" name="address" disabled>
    <option value="">Please Select Address</option>
  </select>
</div>

Hide result