选择标记

Question

我正在尝试使用CSS来设置菜单样式，我在下拉列表中遇到了文本阴影效果剪辑的问题。文本本身似乎是在选择边框内剪裁，这是令人惊讶的，因为我认为它将被允许扩散到填充区域。

＆＃13;

＆＃13;

    html,
    body {
        font-family: Calibri;
        margin: 0px;
        width: 100%;
        height: 100%;
        text-align: center;
        overflow: hidden;
        cursor: default;
    }

    #dropdown_user_select{
        position: absolute;
        left: 25px;
        top: 25px;
    }

    select {
        background: none;
        border: 1px solid;
        border-radius: 2px;
        box-shadow: 0px 0px 8px 0px #555, 0px 0px 25px 0px #555 inset;
        text-shadow: 0px 0px 10px #555;
        text-align: center;
        transition: 0.4s all ease-out;
        font-size: 25px;
        padding: 10px 10px 10px 30px;
        cursor: auto;
        -webkit-appearance: none;
        background: #DDD;
        overflow: visible;
    }

    .cutoff {
        overflow: visible;
    }

    #arrow_down {
        /* a customised arrow on the left of the dropdown */
        border-width: 15px 10px 0px 10px;
        border-color: #000 transparent transparent transparent;
        position: absolute;
        left: 30px;
        top: 45px;
    }

＆＃13;

 <div class="cutoff">
    <select id="dropdown_user_select">
        <option value="ADMIN">ADMIN</option>
        <option value="username">username</option>
    </select>
 </div>
 <div id="arrow_down" class="arrow_pointer"></div>

＆＃13;

＆＃13;

＆＃13;

正如你所看到的，我试图使用带溢出的div：可见来解决这个问题，但它没有用。

修改

通过剪切，我的意思是文本阴影在标签内被切断。这是一个比上面更好地展示这个的例子：

＆＃13;

＆＃13;

    html,
    body {
        font-family: Calibri;
        margin: 0px;
        width: 100%;
        height: 100%;
        text-align: center;
        overflow: hidden;
    }

    #dropdown_user_select{
        position: absolute;
        left: 25px;
        top: 25px;
    }

    select {
        border: 1px solid;
        border-radius: 2px;
        text-shadow: 0px 0px 10px #F00;
        font-size: 25px;
        padding: 10px 10px 10px 30px;
        -webkit-appearance: none;
        background: #FFF;
        overflow: visible;
    }

＆＃13;

<select id="dropdown_user_select">
    <option value="ADMIN">ADMIN</option>
    <option value="username">username</option>
</select>

＆＃13;

＆＃13;

＆＃13;

Answer 1

很难弄清楚你究竟想要完成什么，但是如果我读得正确的话，里面的文字会为你剪裁到边框之外。另外，我不确定你的阴影是什么意思......这里是一个JSfiddle：

＆＃13;

＆＃13;

html, body {
  font-family: Calibri;
  margin: 0px;
  width: 100%;
  height: 100%;
  text-align: center;
  overflow: hidden;
  cursor: default;
}

#dropdown_user_select{
  position: absolute;
  left: 25px;
  top: 25px;
}

select {
  background: none;
  border: 1px solid;
  border-radius: 2px;
  box-shadow: 0px 0px 8px 0px #555, 0px 0px 25px 0px #555;
  text-shadow: 0px 0px 10px #555;
  text-align: center;
  transition: 0.4s all ease-out;
  font-size: 25px;
  padding: 10px 15px 10px 25px;
  cursor: auto;
  -webkit-appearance: none;
  background: #DDD;
  overflow: visible;
}

.cutoff {
  overflow: hidden;
}

#arrow_down {
  /* a customised arrow on the left of the dropdown */
  border-width: 15px 10px 0px 10px;
  border-color: #000 transparent transparent transparent;
  position: absolute;
  left: 30px;
  top: 45px;
}

＆＃13;

<div class="cutoff">
  <select id="dropdown_user_select">
    <option value="ADMIN">ADMIN</option>
    <option value="username">username</option>
  </select>
</div>
<div id="arrow_down" class="arrow_pointer"></div>

＆＃13;

＆＃13;

＆＃13;

我在overflow中修改了.cutoff值，并从inset中的方框阴影中删除了select。我还编辑了您的填充值以适应向下箭头的宽度。不确定这是不是发生了什么，但我希望我帮助过。

如果不是发生了什么，请向我解释发生了什么，以便我可以尝试提供帮助。

Answer 2

问题可能是<option>标签本身没有填充，而select上设置的标签实际上会推动选项的左边缘，切断阴影。

通过使用一些技巧它似乎适用于Chrome，但它没有在其他浏览器上测试过，虽然我认为它很好。

text-indent修复了左阴影，而line-height修复了垂直阴影。

select {
    border: 1px solid;
    border-radius: 2px;
    text-shadow: 0px 0px 20px #F00; /* increased to test vertical cut */
    text-indent: 20px; /* fix the left shadow */
    line-height: 40px; /* fix the top/bottom shadows */
    font-size: 25px;
    padding: 10px 10px 10px 0; /* removed left padding to compensate with indent */
    -webkit-appearance: none;
    background: #FFF;
    overflow: visible;
}

<select id="dropdown_user_select">
    <option value="ADMIN">ADMIN</option>
    <option value="username">username</option>
</select>