diff --git a/index.html b/index.html index f9c7c6b..830c515 100644 --- a/index.html +++ b/index.html @@ -171,6 +171,31 @@

Przykładowy form 1

+
+
+ + Jaki jest Twój typ osobowości:4 typy osobowości według Hipokratesa +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+
+
div > fieldset{ - border: 0; - /* padding: 10px; */ - padding: 0; - margin: 0; +form > div > fieldset { + border: 0; + /* padding: 10px; */ + padding: 0; + margin: 0; } form > div > fieldset > div > div > label { - font-size: 0.9rem; - color: black; - padding-left: 0.6rem; + font-size: 0.9rem; + color: black; + padding-left: 0.6rem; } -form textarea{ - width: 100%; +form textarea { + width: 100%; } /* form/div[6]/div */ form > div > div { - padding-left:0; + padding-left: 0; } - -form > div > fieldset > div > div > input{ - width: auto; - float: left; - /* margin-left: 0; */ +form > div > fieldset > div > div > input { + width: auto; + float: left; + /* margin-left: 0; */ } /* xpath full path */ /* /html/body/div/form/div[7]/fieldset/div/div[1] */ form > div > fieldset > div > div { - padding: 0; + padding: 0; } .cities > div > input { - width: auto; - float: left; + width: auto; + float: left; +} + +form input:focus { + border: 3px solid orange; } -form input:focus{ - border: 3px solid orange; +form input, +textarea { + background-color: yellow; } -form input, textarea{ - background-color: yellow; +#sendForm { + background-color: red; + font-weight: bold; + font-size: 1.5rem; + width: 100px; + height: 40px; + display: block; + margin: 0 auto; } -#sendForm{ - background-color:red; - font-weight: bold; - font-size: 1.5rem; - width: 100px; - height: 40px; - display: block; - margin: 0 auto; +#sendForm:hover { + transition: border 2s ease-in-out, background-color 2s ease-in-out, + color 1s ease-in, border-radius 2s ease-in-out; + border: 3px solid darkorange; + background-color: pink; + color: white; + border-radius: 5px; } -#sendForm:hover{ - transition: border 2s ease-in-out, background-color 2s ease-in-out, color 1s ease-in, border-radius 2s ease-in-out; - border: 3px solid darkorange; - background-color: pink; - color: white; - border-radius: 5px; -} \ No newline at end of file +.description_tooltip { + position: relative; + display: inline-block; + font-style: italic; +} + +.description_tooltip .tooltiptext { + visibility: hidden; + width: 120px; + background-color: black; + color: #fff; + text-align: center; + border-radius: 6px; + padding: 5px 0; + + /* Position the tooltip */ + position: absolute; + z-index: 1; + top: -5px; + left: 105%; +} + +.description_tooltip:hover .tooltiptext { + visibility: visible; +}