Styled checkboxes and initial buttons

DTrejo · Jul 10, 2009 · 9cc8c7e · 9cc8c7e
1 parent e58a17e
commit 9cc8c7e
Show file tree

Hide file tree

Showing 6 changed files with 61 additions and 0 deletions.
diff --git a/css/aristo.css b/css/aristo.css
@@ -0,0 +1,39 @@
+/*
+CSS 3 Docs
+http://qooxdoo.org/documentation/general/webkit_css_styles
+http://trac.webkit.org/browser/trunk/LayoutTests//fast/css
+*/
+
+input[type="checkbox"] {
+  -khtml-appearance: none;
+  background: url(../images/check-box-bezel.png) no-repeat;
+  width: 15px;
+  height: 16px;
+}
+
+input[type="checkbox"]:checked {
+  background: url(../images/check-box-bezel-selected.png) no-repeat;
+}
+
+button {
+  -khtml-appearance: none;
+  background: none;
+  line-height: 12px;
+  -webkit-border-image: url(../images/button-bezel.png) 0 0 0 0 stretch stretch;
+  padding: 4px 6px;
+  font-family: 'Arial';
+  font-size: 12px;
+  font-weight: bold;
+  color: #4F4F4F;
+}
+
+button:hover {
+  -webkit-border-image: url(../images/button-bezel-selected.png) 0 0 0 0 stretch stretch;
+}
+
+button:active {
+}
+
+button:disabled {
+
+}
diff --git a/images/button-bezel-selected.png b/images/button-bezel-selected.png
diff --git a/images/button-bezel.png b/images/button-bezel.png
diff --git a/images/check-box-bezel-selected.png b/images/check-box-bezel-selected.png
diff --git a/images/check-box-bezel.png b/images/check-box-bezel.png
diff --git a/index.html b/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
+   "http://www.w3.org/TR/html4/strict.dtd">
+
+<html lang="en">
+<head>
+	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+	<title>Aristo</title>
+	<meta name="generator" content="TextMate http://macromates.com/">
+	<meta name="author" content="Alex MacCaw">
+	<link rel="stylesheet" href="css/aristo.css" type="text/css">
+</head>
+<body>
+
+
+<input type="checkbox" />
+
+
+<button>Test Button</button>
+
+<input type="range" />
+</body>
+</html>