blocks|key|2058691|text|首先使用css媒体查询针对您的移动设备，然后在您的自定义选择样式之前添加额外的选择样式，以重置默认css：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2058692|@media+only+screen+and+(max-width:+480px)+{
+++++select+{
+++++++-webkit-appearance:+none;
+++++++-moz-appearance:+none;
+++++++appearance:+none;
+++++}

++++select+{
++++++++background:+-webkit-linear-gradient(white,+#666);
++++++++border:+1px+solid+#ccc;
++++++++border-radius:+5px;
++++++++color:+white;
++++++++text-shadow:+0+0+4px+rgba(0,+0,+0,+0.8);
++++++++-webkit-appearance:+none;
++++}
}|code-block|syntax|javascript|2058693|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>First target your mobile devices with a css media query, then add an extra select style before your custom select style to reset the default css:</p>

<pre><code>@media only screen and (max-width: 480px) {
     select {
       -webkit-appearance: none;
       -moz-appearance: none;
       appearance: none;
     }

    select {
        background: -webkit-linear-gradient(white, #666);
        border: 1px solid #ccc;
        border-radius: 5px;
        color: white;
        text-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
        -webkit-appearance: none;
    }
}
</code></pre>


blocks|key|2872318|text|您可以使用最大设备宽度(CSS3)完成此操作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2872319|@media+only+screen+and+(max-device-width:+480px)+{
select+{
++++background:+-webkit-linear-gradient(white,+#666);
++++border:+1px+solid+#ccc;
++++border-radius:+5px;
++++color:+white;
++++text-shadow:+0+0+4px+rgba(0,+0,+0,+0.8);
++++-webkit-appearance:+none;
}
}|code-block|syntax|javascript|2872320|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>You can do it using max-device-width (CSS3):</p>

<pre><code>@media only screen and (max-device-width: 480px) {
select {
    background: -webkit-linear-gradient(white, #666);
    border: 1px solid #ccc;
    border-radius: 5px;
    color: white;
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
    -webkit-appearance: none;
}
}
</code></pre>


blocks|key|4985815|text|推荐的方法是使用媒体查询来定位特定的分辨率。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4985816|对于您的情况，您可以将CSS修改为以下内容：|4985817|@media+screen+and+(max-width:+480px)+{
++++select{
++++++++/*+Add+your+mobile+only+CSS+here+*/
++++}
}

select+{
++++/*+Add+your+non-mobile+CSS+here+*/
}|code-block|syntax|javascript|4985818|另一种通常不推荐的方法是通过设备类型通过使用Javascript检测用户代理来确定目标。|4985819|这里的缺点是，无论您今天针对的是什么设备，明天当新设备推出或用户代理更新时，都会发生变化。|4985820|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>The recommended approach is to use a media query to target specific resolutions.  </p>

<p>For your case you can modify your CSS to the following:</p>

<pre><code>@media screen and (max-width: 480px) {
    select{
        /* Add your mobile only CSS here */
    }
}

select {
    /* Add your non-mobile CSS here */
}
</code></pre>

<p>Another approach that is not generally recommended is to target via device type by detecting the user agent with Javascript.  </p>

<p>The downside here is that whatever devices you are targeting today will change tomorrow when new devices come out or when user agents are updated.</p>


blocks|key|2058716|text|在使用Css查询定位移动屏幕分辨率之后，然后尝试在选择框之前添加样式，|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2058717|​|2058718|@media+screen+and+(max-width:+480px)+{
++++select{
++++++++/*+try+to+place+your+css+code+to+display+on+mobile+devices+*/
++++++++++}
+++++++++++++++++++++++++++++++++++++}

select+{
++++/*+try+to+place+your+css+code+to+display+on+large+screens*/
+++++++}|code-block|syntax|javascript|2058719|2058720|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|N|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p>After targeting mobile screen resolution with Css query, and then try to add styling before your select box,</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>@media screen and (max-width: 480px) {
    select{
        /* try to place your css code to display on mobile devices */
          }
                                     }

select {
    /* try to place your css code to display on large screens*/
       }</code></pre>
</div>
</div>
</p>


<p>Actually I am trying to style <code>&lt;select&gt;</code> box using CSS(no any image as background) my problem is when I view it on mobile devices it show me like a textbox please guide me how to make it like a select box with css.
Note: I don't want any background image in css.</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>select {
    background: -webkit-linear-gradient(white, #666);
    border: 1px solid #ccc;
    border-radius: 5px;
    color: white;
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
    -webkit-appearance: none;
}</code></pre>
</div>
</div>
</p>


How to style a select box only on mobile devices

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

实际上，我正在尝试使用样式样式<select>框(没有任何图像作为背景)，我的问题是，当我在移动设备上查看它时，它显示我像一个文本框，请指导我如何使它像一个选择框与css。注意:我不想在css中有任何背景图片。​select {    background: -webkit-linear-gradient(white,...

问如何仅在移动设备上设置选择框的样式
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何仅在移动设备上设置选择框的样式EN