CSS - 选择元素 - 边界半径 - 歌剧背后显示出选择输入的边界? 在没有出现弯曲边界?

我有麻烦试图风格歌剧中选择元素。

发生了什么,是大多数的应用到CSS这个元素的样式在Opera(11.60)所示,但由于某些原因位也得到冷落,就像盒子阴影效果和边界半径。

这在我看来,歌剧显示上述这些样式的选择元素,正如我在过渡已经注意到,弯曲的边界确实存在,它只是后面的select元素。 如,选择元素时没有重点似乎没有边界半径的影响,但是当焦点应用于元素,你再看到transistion边框则在元素的后面再次消失。

在IE 9,火狐9和Chrome浏览器的最新版本,有问题的选择元素出来不久的制服。 而且在所有的,包括Opera,输入元素出来完美地应用了相同的元素的样式。

这里的HTML:

<div class="searchBox"> <form method="post" action="'.$_SERVER['PHP_SELF'].'" name="search"> <label for="bizName">Biz Name:</label> <input name="bizName" class="bizName" type="search" placeholder="Search..." /> <label for="bizCategory">Biz Category:</label> <select name="bizCategory" class="bizCategory" onchange="this.form.submit()"> <option>Choose</option> </select> <button type="submit" name="searching" class="search" value="Search">Search</button> </form> <!-- end .searchBox --></div>

和继承人的网页的CSS:

input, select { background: #fcfcfc; border: 0px none; font: bold 12px Arial,Helvetica,Sans-serif; color: #6a6f75; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset; -moz-box-shadow: , 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset; -o-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset; -webkit-background-clip: padding-box; -webkit-transition: all 0.7s ease-out 0s; /* Saf3.2+, Chrome */ -moz-transition: all 0.7s ease-out 0s; /* FF4+ */ -ms-transition: all 0.7s ease-out 0s; /* IE10? */ -o-transition: all 0.7s ease-out 0s; /* Opera 10.5+ */ transition: all 0.7s ease-out 0s; } input { padding: 7px 25px; width: 135px; } select { padding: 7px 10px; width: 185px; } input:focus, select:focus { background: #6699cc; color: #e7f3ff; text-shadow: -1px -1px 0 #666, 1px -1px 0 #666, -1px 1px 0 #666, 1px 1px 0 #666; -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset; -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset; } .bizCategory { margin-right: 15px; }

我不明白为什么要歌剧反应这种方式,因为我相信它确实有些支持W3C规范呢?

在anycase,我的假设是,歌剧院是运用了某种默认样式这个选择标记。 但是,这仅仅是一种假设。

将任何人能够提供这方面的投入; 或者将以前已经遇到过这个问题的人,能够解释究竟是怎么回事?

感谢您提前采取通过这个阅读的时候了!

--------------解决方案-------------

改进答案2015年:

我发现我很需要我们在现在的时间样式选择列表的使用 - 所以这里是一旦我有迄今为止最好的体验。 还有是不是真的没有任何的JavaScript解决问题。 坚韧,你可以使用一个无序列表和列表元素和风格它,并抓住从选定李与一些JavaScript的信息和槽后一个ajax POST方法。 没有任何框架,这个IE8 +的做法是这样的:

var request = new XMLHttpRequest();
request.open('POST', '/my/url', true);
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
request.send(data);

如果您使用的是框架结账集结在选择的角度和下面引导。

角选择来自角料,你可以在这个疯狂的顶部风格为你想要或使用JavaScript我做了同样的框架风格你自己。

引导

如果你不使用你的项目的角度我认为引导解决它是迄今为止我用过的最好的方式。 引导选择

老答案

一般来说,我会说永远不会重新设计一个选择按钮,但无论如何它的结帐方式approche它https://gist.github.com/itsadok/1139558

如果你只需要打新的浏览器,你可以用这个,只是样式它像任何其他对象:

-webkit-appearance: none;
-moz-appearance: none;
appearance: none;

看到一些东西,约这里

或者我会去的JavaScript解决方案有很多人在那里已经完成它,这样的共享:adam.co/lab/jquery/customselect或本bulgaria-web-developers.com/projects/javascript/selectbox或建立它我自己就像一个jQuery插件建立在UL和李的

在你的问题,你甚至可以去菜单结构,如“UL&礼”,这给了上点击东西的jQuery 这样调用FIDDLE

只取从“.yourtextholder”文本,发送到url

这是背景select不尊重圆角元素。 (类似IE8中的ActiveX过滤器)

如果你并不需要一个特定的背景颜色,你可以使用一个完全地透明背景:

select {
background-color: rgba(255, 255, 255, 0.0)
}

下拉按钮仍然重叠右边角落,但至少在左边你摆脱那些“狗耳朵”的。

分类:CSS 时间:2012-01-01 人气:1
分享到:

相关文章

  • 为什么浏览器从右匹配CSS选择离开? 2012-06-02

    CSS选择通过浏览器引擎从右到左匹配. 因此,他们首先找到了孩子,然后检查他们的父母,看看他们是否规则的部分的其余部分相匹配. 为什么是这样? 难道仅仅是因为规范说? 它会影响最终的布局,如果它是从左边评价,对不对? 要我做这将是使用选择的元素数量最少最简单的方法. 所以第一的ID(因为他们应该只返回1元). 那么也许类或具有最少数量的节点中的一个元素 - 例如,有可能只有一个跨度的页面,以便直接进入该节点与引用的跨度任何规则. 这里有一些链接备份我的索赔 http://code.google.

  • 是否有可能应用CSS选择取决于浏览器所用? 2013-10-29

    我有一个白色的字段集在蓝色背景. 我没有申请任何填充字段集内,但它看起来像有适用于所有其他浏览器5像素填充: 除了IE浏览器. 如果我申请5像素,那么IE看起来不错,但有太多的填充为浏览器的其余部分. 好像他们加起来. 这是最明显的问题,但也有一些其他不太明显的问题,其中只有Internet Explorer的行为不同从浏览器的其余部分. 那么,有没有应用 CSS选择的一种方式? 例如 ,如果(IE然后应用5像素填充). 感谢您的帮助 --------------解决方案------------

  • 如何让一个css“如果歌剧,不可─” 2013-02-26

    我想打一个CSS规则,它影响所有,但opera浏览器,所有其他浏览器添加CSS规则: #content{left:1px;}戏没有这个规则). 下面的代码没有工作... <!--[if !OPERA]> <style type="text/css"> #content{left:1px;} </style> <![endif]--> --------------解决方案------------- 你可以使用你想要的属性如选择#conten

  • CSS选择非规范化 2012-03-19

    有一个书面(多次)规则,最高审计机关, 一个#ID选择标识的独特元素插入DOM树 . 这总是跟着, 只有一个与此#ID单独元素可以存在到DOM树的结论. 所以,如果你需要使用一个CSS选择一种元素有另一个事件到你必须使用一个选择的.class DOM树. 好了,我对这个也收缩,我认为不响应的实际需要,并避免了更直观的使用和#ID选择的.class的serios疑虑. 问题: 现有连锁选择像'#ID1#ID2"我可以理解#ID2更好是唯一进入#ID1上下文,但它是迫使该#ID2应该是唯一到整个DO

  • 在什么条件下,我们可以使用CSS *选择? 2013-05-10

    在什么条件下,我们可以使用CSS *选择? 多少*选择器有用吗? 难道只是为了使CSS复位或破解 * { margin: 0; padding: 0; } 或者有其他有效的有用的用途? 有没有办法用*选择使用*选择器来优化CSS? 它是在所有浏览器都支持? --------------解决方案------------- 这主要是有用的,你想表达的是有一个元素存在,但你不在乎它是什么. 例如: #mything * span { color: red; } 选择跨度内mything,但不能跨越内部

  • CSS选择:可以选择仅第二个元素? 2013-05-30

    这甚至可能? <div class="column"> <div> <div> </div> <div> <!-- Definitely not this DIV! --> </div> </div> <div> <!-- THIS DIV ONLY! --> </div> </div> 下面的CSS选择器得到一个我已经标有"绝对不是

  • 是CSS选择一个大的性能损失? 2013-08-28

    我有一个Web应用程序一串HTML代码. 还有一些风格属性,我无法摆脱,但我想知道,如果它是值得的清洁摆脱类的名称,并使用CSS选择器来代替. 不要CSS选择器执行速度很慢? 我说的是更复杂的选择一样#示例DIV> DIV替换类名选择器如.EXAMPLE:第n个孩子(3)>点 --------------解决方案------------- 看看这篇文章,看看这个图. 我不知道该如何确切的这个基准是,但似乎子选择器确实比较慢,但你不会找到任何可见的收益,避免孩子选择..这是一个微型的优化,有写的

  • 如何获得一个给定的DOM元素中定义的所有CSS选择? 2014-12-12

    如何获得使用jQuery一个给定的DOM元素中定义的所有CSS选择? 随着定义我的意思是这是在任何应用到样式表中使用CSS选择document . 在某种程度上,这是类似于萤火虫其中它实现的功能,显示所有选定DOM元素应用CSS选择. 任何帮助表示赞赏. --------------解决方案------------- 从这个答案你也许可以让你通过通过cssRules财产循环找什么. var myElement = $("#content"); for (var x = 0; x <

  • 重复更新问题 - 浏览器的选择,更新Windows 8 2012-04-07

    得到了欧盟的浏览器的选择更新2次失败,失败后15分钟车回滚发生,以及遍布开始重新启动过程之后. 我现在禁用自动更新,但是这不能成为sollution. 我可以禁用此更新? 或者是有一个解决方案 原标题:宋衍涛更新问题浏览器更新chice --------------解决方案------------- 嗨HermanZuidema, 感谢您对张贴在微软社区论坛查询! 问题描述似乎有点不清楚,我想有一个更好的了解,我们开始工作之前. 我真的很感激,如果你能帮助我以下信息. 1.这是问题的具体任何更新

  • iPhone /移动Safari浏览器= .css文件阻止并发服务器的请求? 2012-06-09

    移动网站上的项目,我一直工作在最近已被性能咨询公司分析,他们回来了,建议大家将所有我们的.css文件链接到HTML的底部,以适应在iPhone上,其中的问题. CSS文件可以阻止并发服务器请求. 我一直都知道,当涉及到.js文件这是大多数浏览器真正的 - 因此把.js文件链接在自己的HTML底部的普遍做法 - 但我从来没有听说过这个关于.css文件. 我还没有得到来自咨询公司引用的参考文献,以这个正对移动Safari浏览器的实际问题的响应. 有没有其他人听到这个消息,如果是这样,知道谈论它的任何

Copyright (C) 55228885.com, All Rights Reserved.

55228885 版权所有 京ICP备15002868号

processed in 0.828 (s). 10 q(s)