浏览器特定风格

时间：2016-07-18 17:50:35

标签： html css

我正在编写自己的CSS重置，但遇到了问题。假设我有以下HTML，我使用给定的样式重置它。

function finalGrade() {
    //pulls the current counter from local storage
    var counter = localStorage.getItem('counter');
    var myPercent = (counter / 3) * 100;
    var myFinalPercent = myPercent.toFixed(2);
    if (myPercent < 80) {
        var failOrPass = "Failing";
            var QuestionNumber = "Quiz on Croatia.";
            var QuizDesc = "Quiz questions on the country of Croatia.";
            var name = localStorage.getItem('name');
            var email = localStorage.getItem('email');
            QuizFailed(email, name, QuestionNumber, QuizDesc);
        } else {
            var failOrPass = "Passing";
            //QuizPassed();
            }
    document.location.replace("ThankYouPage.html");
    $('#summaryID').append("You scored " + counter + " out of a possible 3 for " + myFinalPercent + "%. This results in a " + failOrPass + " score.");
}

<body>

<div class="container">
  <h1>Thank you for taking this short quiz on the country of Croatia.</h1>
  <p id="summaryID"></p>
</div>


<script src="js/init.js" type="text/javascript"></script>
<script src="js/xapiwrapper.min.js" type="text/javascript"></script>
</body>

由于输入元素的渲染不同（在本例中为复选框），因此这不起作用。请参阅以下示例。

Chrome <{3}}

Firefox＆amp; IE
enter image description here

两个复选框均为13x13像素，但Chrome的实际（可视）尺寸为12x12像素。它具有阴影效果，使其为13x13像素。如果我希望它正确对齐，我需要在复选框上使用* { margin: 0; padding: 0; border: 0; font: inherit; font-size: 100%; line-height: 1.2; vertical-align: baseline; } body { margin: 10px; font-family: sans-serif; }。

enter image description here

但如果我这样做，它也会在其他浏览器上应用这种风格。所以我只需要在Chrome上应用<p> <input type="checkbox" /> <span style="font-size: 2em;">Red</span> </p>。有没有办法实现这个目标？也许像是

vertical-align: -1px

更新：我已设法自定义Chrome上的复选框，这很不错，但IE不支持vertical-align: -1px，即使Firefox适用input[type="checkbox"]:(if-chrome) { vertical-align: -1px; } ，将复选框border-style更改为inset，不允许您修改它。后来发现appearance是enter image description here（non-standart）是一个巨大的失望。我想我必须等dropped css3 features。

-moz-appearance: none
appearance

1 个答案:

答案 0 :(得分：1)

我建议你采用另一种方式，一种基本的样式，然后让浏览器以他们的方式呈现其控件。

Src：Styling HTML forms

这是一个好的表单重置CSS，根据您的要求进行调整

Src：https://gist.github.com/anthonyshort/552543

＆＃13;
＆＃13; 
/* ----------------------------------------------------------------------------------------------------
Super Form Reset
A couple of things to watch out for:
- IE8: If a text input doesn't have padding on all sides or none the text won't be centered.
- The default border sizes on text inputs in all UAs seem to be slightly different. You're better off using custom borders.
- You NEED to set the font-size and family on all form elements
- Search inputs need to have their appearance reset and the box-sizing set to content-box to match other UAs
- You can style the upload button in webkit using ::-webkit-file-upload-button
- ::-webkit-file-upload-button selectors can't be used in the same selector as normal ones. FF and IE freak out.
- IE: You don't need to fake inline-block with labels and form controls in IE. They function as inline-block.
- By turning off ::-webkit-search-decoration, it removes the extra whitespace on the left on search inputs
----------------------------------------------------------------------------------------------------*/

input,
label,
select,
button,
textarea
{
	margin:0;
	border:0;
	padding:0;
	display:inline-block;
	vertical-align:middle;
	white-space:normal;
	background:none;
	line-height:1;
	
	/* Browsers have different default form fonts */
	font-size:13px;
	font-family:Arial;
}

/* Remove the stupid outer glow in Webkit */
input:focus
{
	outline:0;
}

/* Box Sizing Reset
-----------------------------------------------*/

/* All of our custom controls should be what we expect them to be */
input,
textarea
{
	-webkit-box-sizing:content-box;
	-moz-box-sizing:content-box;
	box-sizing:content-box;
}

/* These elements are usually rendered a certain way by the browser */
button,
input[type=reset],
input[type=button],
input[type=submit],
input[type=checkbox],
input[type=radio],
select
{
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}

/* Text Inputs
-----------------------------------------------*/

input[type=date],
input[type=datetime],
input[type=datetime-local],
input[type=email],
input[type=month],
input[type=number],
input[type=password],
input[type=range],
input[type=search],
input[type=tel],
input[type=text],
input[type=time],
input[type=url],
input[type=week]
{
}

/* Button Controls
-----------------------------------------------*/

input[type=checkbox],
input[type=radio]
{
	width:13px;
	height:13px;
}

/* File Uploads
-----------------------------------------------*/

input[type=file]
{

}

/* Search Input
-----------------------------------------------*/

/* Make webkit render the search input like a normal text field */
input[type=search]
{
	-webkit-appearance:textfield;
	-webkit-box-sizing:content-box;
}

/* Turn off the recent search for webkit. It adds about 15px padding on the left */
::-webkit-search-decoration
{
	display:none;
}

/* Buttons
-----------------------------------------------*/

button,
input[type="reset"],
input[type="button"],
input[type="submit"]
{
	/* Fix IE7 display bug */
	overflow:visible;
	width:auto;
}

/* IE8 and FF freak out if this rule is within another selector */
::-webkit-file-upload-button
{	
	padding:0;
	border:0;
	background:none;
}

/* Textarea
-----------------------------------------------*/

textarea 
{
	/* Move the label to the top */
	vertical-align:top;
	
	/* Turn off scroll bars in IE unless needed */
	overflow:auto;
}

/* Selects
-----------------------------------------------*/

select
{

}

select[multiple] 
{
	/* Move the label to the top */
	vertical-align:top;
}
＆＃13;
＆＃13;
＆＃13;

根据问题编辑进行更新

使用标签+伪而不是appearance

＆＃13;
＆＃13; 
* {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  line-height: 1.2;
  vertical-align: baseline;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
body {
  margin: 10px;
  font-family: sans-serif;
  box-sizing: border-box;
}
input[type="radio"],
input[type="checkbox"] {
  display: none;
}
input[type="checkbox"] + label {
  position: relative;
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 1px solid black;
  text-align: center;
}
input[type="checkbox"]:checked + label:after {
  content: "✔";
  display: inline-block;
  vertical-align: top;
  height: inherit;
  font-size: 14px;
  font-weight: bold;
}

input[type="radio"] + label {
  position: relative;
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 1px solid black;
  border-radius: 50%;
  text-align: center;
  position: relative;
}
input[type="radio"]:checked + label:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -4px 0 0 -4px;   /* half the width/height to center */
  width: 8px;
  height: 8px;
  background: black;
  border-radius: 50%;
}
＆＃13; 
<p>
  <input id="chk1" type="checkbox" checked="checked" />
  <label for="chk1"></label> <span style="font-size: 2em;">Red</span>
</p>

<p>
  <input id="rad1" type="radio" name="rad" />
  <label for="rad1"></label> <span style="font-size: 2em;">Up</span>
  <br>
  <input id="rad2" type="radio" name="rad" checked="checked" />
  <label for="rad2"></label> <span style="font-size: 2em;">Down</span>
</p>
＆＃13;
＆＃13;
＆＃13;

旁注：

:before和:after在容器内呈现，并且不会在input这样的单个标记元素中工作，但在这种情况下，Chrome无论如何都会呈现它。

Src： http://www.w3.org/TR/CSS2/generate.html#before-after-content

相关问题
最新问题