Question

尝试找出样式选择框的问题。它被包裹在一个带有背景的div中，以创建一个蒙版外观。

当输入中的文字太多时，它会溢出到按钮中。

HTML：

  public bool CopyFolderInsideS3Bucket(string source, string destination)
        {
            var strippedSource = source;
            var strippedDestination = destination;

            // process source
            if (strippedSource.StartsWith("/"))
                strippedSource = strippedSource.Substring(1);
            if (strippedSource.EndsWith("/"))
                strippedSource = source.Substring(0, strippedSource.Length - 1);

            var sourceParts = strippedSource.Split('/');
            var sourceBucket = sourceParts[0];

            var sourcePrefix = new StringBuilder();
            for (var i = 1; i < sourceParts.Length; i++)
            {
                sourcePrefix.Append(sourceParts[i]);
                sourcePrefix.Append("/");
            }

            // process destination
            if (strippedDestination.StartsWith("/"))
                strippedDestination = destination.Substring(1);
            if (strippedDestination.EndsWith("/"))
                strippedDestination = destination.Substring(0, strippedDestination.Length - 1);

            var destinationParts = strippedDestination.Split('/');
            var destinationBucket = destinationParts[0];

            var destinationPrefix = new StringBuilder();
            for (var i = 1; i < destinationParts.Length; i++)
            {
                destinationPrefix.Append(destinationParts[i]);
                destinationPrefix.Append("/");
            }

            var listObjectsResult = client.ListObjects(new ListObjectsRequest(){ 
                BucketName = sourceBucket,
                Prefix = sourcePrefix.ToString(),
                Delimiter = "/"});

            // copy each file
            foreach (var file in listObjectsResult.S3Objects)
            {
                var request = new CopyObjectRequest();
                request.SourceBucket = Settings.BucketName;
                request.SourceKey = file.Key;
                request.DestinationBucket = destinationBucket;
                request.DestinationKey = destinationPrefix + file.Key.Substring(sourcePrefix.Length);
                request.CannedACL = S3CannedACL.PublicRead;
                var response = (CopyObjectResponse)client.CopyObject(request);
            }

            // copy subfolders
            foreach (var folder in listObjectsResult.CommonPrefixes)
            {
                var actualFolder = folder.Substring(sourcePrefix.Length);
                actualFolder = actualFolder.Substring(0, actualFolder.Length - 1);
                CopyFolderInsideS3Bucket(strippedSource + "/" + actualFolder, strippedDestination + "/" + actualFolder);
            }

            return true;
        }

CSS：

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

任何人都可以解决这个问题吗？

Answer 1

问题是，您在padding-right: 10%;本身的css中使用select。测量图像 - 选择大约270px宽，只10% width的{{1}} - 这是我的措施所正确的。

要解决此问题，27px箭头似乎为background-image宽，因此请使用60px（padding-right: 78px;作为背景图片的60px和width尊重您之前设置的移动媒体查询中的18px。

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>

Answer 3

如果没有看到任何代码，就很难说出如何设置要构建的HTML。但你能做的一件事就是捏造它。让它看起来好像发生了什么。假设您的下拉箭头是与您的选择项目分开的元素，您可以给它一些以下代码。（。选择按钮是我在下拉列表中给你的按钮的类）

.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元素成为兄弟，然后给它一个指针样式的事件：无;为了防止它被点击，但仍然具有你想要的外观。

有些人可能会说这是不好的做法，但鉴于这种情况，这是你能做的最好的事情。非常简单，非常轻巧，功能比许多选项都要好。

霍勒如果您有任何疑问！

好运好友！

评论后

从评论中获取每个信息的css。最好创建一个带有背景颜色，bg图像和盒子阴影的伪元素，其z-index高于select，以创建一个仍然可以使select可点击的假按钮。

.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

您在2个不同的地方使用padding-right元素的select百分比值（10％）。但是，对于background-size元素的.styled-select属性，您使用的是固定像素值（60px）。

这意味着当.styled-select元素正好 600px宽时，子select元素的文本将在background-image开始的位置被剪切 - 任何更大的，您将开始看到文本和图像之间出现空白区域，任何更小的文本将开始与图像重叠。

因此，要解决这个问题，您应该将padding-right更改为等于background-size值的固定像素值加上一些额外的像素，这样文字就不会直到{{{} 1}}。

我也冒昧地清理你的CSS了;您不需要重新声明媒体查询中的所有样式，只需要覆盖或更改那些样式。

background-image

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

样式选择文本溢出

6 个答案:

你好：