I have a css template for a search bar which i am using. I need to add a heading just above and below the search bar , however as i add it , the heading is not centre aligning with my code nor the margin styling is working for me. Can anybody tell me what should be the css to align it in centre of the page , just above the search bar. If i add alignment, the search bar alignment is disturbed. Here is the css for search bar :
.heading{
font-family: Fondamento;
font-size: 24px;
font-style: normal;
font-variant: normal;
font-weight: 700;
line-height: 26.4px;
padding: 0.75em;
position: relative;
}
* {
border: 0;
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
font-size: calc(16px + (24 - 16)*(100vw - 320px)/(1920 - 320));
}
body, button, input {
font: 1em Hind, sans-serif;
line-height: 1.5em;
}
body, input {
color: #171717;
}
body, .search-bar {
display: flex;
}
body {
background: #f1f1f1;
height: 100vh;
}
.search-bar input,
.search-btn,
.search-btn:before,
.search-btn:after {
transition: all 0.25s ease-out;
}
.search-bar input,
.search-btn {
width: 3em;
height: 3em;
}
.search-bar input:invalid:not(:focus),
.search-btn {
cursor: pointer;
}
.search-bar,
.search-bar input:focus,
.search-bar input:valid {
width: 100%;
}
.search-bar input:focus,
.search-bar input:not(:focus) + .search-btn:focus {
outline: transparent;
}
.search-bar {
margin: auto;
padding: 1.5em;
justify-content: center;
max-width: 30em;
}
.search-bar input {
background: transparent;
border-radius: 1.5em;
box-shadow: 0 0 0 0.4em #171717 inset;
padding: 0.75em;
transform: translate(0.5em,0.5em) scale(0.5);
transform-origin: 100% 0;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.search-bar input::-webkit-search-decoration {
-webkit-appearance: none;
}
.search-bar input:focus,
.search-bar input:valid {
background: #fff;
border-radius: 0.375em 0 0 0.375em;
box-shadow: 0 0 0 0.1em #d9d9d9 inset;
transform: scale(1);
}
.search-btn {
background: #171717;
border-radius: 0 0.75em 0.75em 0 / 0 1.5em 1.5em 0;
padding: 0.75em;
position: relative;
transform: translate(0.25em,0.25em) rotate(45deg) scale(0.25,0.125);
transform-origin: 0 50%;
}
.search-btn:before,
.search-btn:after {
content: "";
display: block;
opacity: 0;
position: absolute;
}
.search-btn:before {
border-radius: 50%;
box-shadow: 0 0 0 0.2em #f1f1f1 inset;
top: 0.75em;
left: 0.75em;
width: 1.2em;
height: 1.2em;
}
.search-btn:after {
background: #f1f1f1;
border-radius: 0 0.25em 0.25em 0;
top: 51%;
left: 51%;
width: 0.75em;
height: 0.25em;
transform: translate(0.2em,0) rotate(45deg);
transform-origin: 0 50%;
}
.search-btn span {
display: inline-block;
overflow: hidden;
width: 1px;
height: 1px;
}
/* Active state */
.search-bar input:focus + .search-btn,
.search-bar input:valid + .search-btn {
background: #2762f3;
border-radius: 0 0.375em 0.375em 0;
transform: scale(1);
}
.search-bar input:focus + .search-btn:before,
.search-bar input:focus + .search-btn:after,
.search-bar input:valid + .search-btn:before,
.search-bar input:valid + .search-btn:after {
opacity: 1;
}
.search-bar input:focus + .search-btn:hover,
.search-bar input:valid + .search-btn:hover,
.search-bar input:valid:not(:focus) + .search-btn:focus {
background: #0c48db;
}
.search-bar input:focus + .search-btn:active,
.search-bar input:valid + .search-btn:active {
transform: translateY(1px);
}
#media screen and (prefers-color-scheme: dark) {
body, input {
color: #f1f1f1;
}
body {
background: #171717;
}
.search-bar input {
box-shadow: 0 0 0 0.4em #f1f1f1 inset;
}
.search-bar input:focus,
.search-bar input:valid {
background: #3d3d3d;
box-shadow: 0 0 0 0.1em #3d3d3d inset;
}
.search-btn {
background: #f1f1f1;
}
}
i need to change the ".heading" css.
HTML Code :
<body>
<h1 class = "heading">WikiMedia</h1>
<form action="/search" method="post" class="search-bar">
<input type="search" name="text" pattern=".*\S.*" required>
<button class="search-btn" type="submit">
<span>Search</span>
</button>
</form>
</body>
without the HTML code its not possible to give you a solution but i have some suggestions.
put the heading in a seperate div and then change its display:flex. then add justify-content:center and align-items:center.
this should work.
Related
I need help with the Select Dropdown. It moves the content (Hello World) when opened. I have used Radio Input to select the specfic option when performing a Search. If there is any other better solution for this type of functionality, please assist.
HTML
<span class="dropdown-el">
<input type="radio" name="sortType" value="Relevance" checked="checked" id="sort-relevance"><label for="sort-relevance">Relevance</label>
<input type="radio" name="sortType" value="Popularity" id="sort-best"><label for="sort-best">Product Popularity</label>
<input type="radio" name="sortType" value="PriceIncreasing" id="sort-low"><label for="sort-low">Price Low to High</label>
<input type="radio" name="sortType" value="PriceDecreasing" id="sort-high"><label for="sort-high">Price High to Low</label>
<input type="radio" name="sortType" value="ProductBrand" id="sort-brand"><label for="sort-brand">Product Brand</label>
<input type="radio" name="sortType" value="ProductName" id="sort-name"><label for="sort-name">Product Name</label>
</span>
<h1> Hello World</h1>
CSS
body {
text-align: center;
background: #ebf4fb;
min-height: 95vh;
margin: 0;
padding: 0;
border-bottom: 5vh solid #3694d7;
font-family: "Myriad Pro", "Arial", sans;
font-size: 24px;
}
.dropdown-el {
margin-top: 20vh;
min-width: 12em;
position: relative;
display: inline-block;
margin-right: 1em;
min-height: 2em;
max-height: 2em;
overflow: hidden;
top: 0.5em;
cursor: pointer;
text-align: left;
white-space: nowrap;
color: #444;
outline: none;
border: 0.06em solid transparent;
border-radius: 1em;
background-color: #cde4f5;
transition: 0.3s all ease-in-out;
}
.dropdown-el input:focus + label {
background: #def;
}
.dropdown-el input {
width: 1px;
height: 1px;
display: inline-block;
position: absolute;
opacity: 0.01;
}
.dropdown-el label {
border-top: 0.06em solid #d9d9d9;
display: block;
height: 2em;
line-height: 2em;
padding-left: 1em;
padding-right: 3em;
cursor: pointer;
position: relative;
transition: 0.3s color ease-in-out;
}
.dropdown-el label:nth-child(2) {
margin-top: 2em;
border-top: 0.06em solid #d9d9d9;
}
.dropdown-el input:checked + label {
display: block;
border-top: none;
position: absolute;
top: 0;
width: 100%;
}
.dropdown-el input:checked + label:nth-child(2) {
margin-top: 0;
position: relative;
}
.dropdown-el::after {
content: "";
position: absolute;
right: 0.8em;
top: 0.9em;
border: 0.3em solid #3694d7;
border-color: #3694d7 transparent transparent transparent;
transition: 0.4s all ease-in-out;
}
.dropdown-el.expanded {
border: 0.06em solid #3694d7;
background: #fff;
border-radius: 0.25em;
padding: 0;
box-shadow: rgba(0, 0, 0, 0.1) 3px 3px 5px 0px;
max-height: 15em;
}
.dropdown-el.expanded label {
border-top: 0.06em solid #d9d9d9;
}
.dropdown-el.expanded label:hover {
color: #3694d7;
}
.dropdown-el.expanded input:checked + label {
color: #3694d7;
}
.dropdown-el.expanded::after {
transform: rotate(-180deg);
top: 0.55em;
}
JQuery
$('.dropdown-el').click(function(e) {
e.preventDefault();
e.stopPropagation();
$(this).toggleClass('expanded');
$('#'+$(e.target).attr('for')).prop('checked',true);
});
$(document).click(function() {
$('.dropdown-el').removeClass('expanded');
});
https://codepen.io/libsys/pen/bGKomaE
Please assist.
Can someone help me figure out why there's a single pixel space between the border of the input range and the top and right edge of the thumb slider? I don't recall this being here before and I can't figure out what is causing it.
#media screen and (min-width:720px) {
.financecalc {
margin-bottom: 0;
width: 300px;
}
.financetext {
width: calc(100% - 330px);
}
}
#media screen and (min-width:960px) {
.financecalc {
width: 400px;
}
.financetext {
width: calc(100% - 430px);
}
}
.paycalc {
background-color: white;
border: 2px solid #b2221b;
border-radius: 8px;
box-shadow: 0 3px 5px 1px black;
padding: 10px;
text-align: center;
width: calc(100% - 24px);
}
.paycalc label {
display: block;
margin-bottom: 4px;
}
.paycalc input[type=range] {
-webkit-appearance: none;
background: #f0f0f0;
border: 2px solid #b2221b;
border-radius: 4px;
display: block;
height: 16px;
opacity: 0.9;
outline: none;
padding: 0;
width: calc(100% - 4px);
}
.paycalc input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 16px;
background: #b2221b;
cursor: pointer;
}
.paycalc input[type=range]::-moz-range-thumb {
width: 20px;
height: 16px;
background: #b2221b;
cursor: pointer;
}
.calcSlider {
margin-bottom: 0;
width: calc(100% - 100px);
}
#interestSlider {
direction: rtl;
}
.calcBox,
.interestBox,
.paymentBox {
background-color: #555;
border: 3px inset #909090;
border-radius: 2px;
color: white;
padding: 6px;
}
.calcBox {
margin-bottom: 0;
width: 62px;
}
.interestBox {
width: 100%;
}
.paymentBox {
width: calc(100% - 18px);
}
.calcBox div,
.paymentBox div {
color: inherit;
margin: 0;
}
.calcBox div:first-of-type,
.paymentBox div:first-of-type {
font-size: 12px;
width: 12px;
}
.calcBox div:last-of-type,
.paymentBox div:last-of-type {
font-size: 18px;
width: calc(100% - 14px);
}
<div id="calculator" class="financecalc">
<form id="myForm" class="paycalc">
<div class="calcSlider">
<label for="downPaymentSlider">Down Payment</label>
<input id="downPaymentSlider" name="downPaymentSlider" type="range" value="500" min="250" max="5000" step="50">
</div>
</form>
</div>
The white line can appear at various zoom levels depending on how the system is mapping CSS pixels to screen pixels (there being several screen pixels to a CSS pixel on many higher def screens nowadays).
It's a bit like a rounding error, a screen pixel can get 'left behind' in the calculations.
As your thumb and your border are the same color here's a slightly unpleasant hack, but it overcomes the problem visually.
This snippet makes the height of the thumb equal to the height of the input element plus its top and bottom borders - this gives the system lots of wiggle room when it's dropping or including a screen pixel and the user won't see bits of white.
#media screen and (min-width:720px) {
.financecalc {
margin-bottom: 0;
width: 300px;
}
.financetext {
width: calc(100% - 330px);
}
}
#media screen and (min-width:960px) {
.financecalc {
width: 400px;
}
.financetext {
width: calc(100% - 430px);
}
}
.paycalc {
background-color: white;
border: 2px solid #b2221b;
border-radius: 8px;
box-shadow: 0 3px 5px 1px black;
padding: 10px;
text-align: center;
width: calc(100% - 24px);
}
.paycalc label {
display: block;
margin-bottom: 4px;
}
.paycalc input[type=range] {
-webkit-appearance: none;
background: #f0f0f0;
border: 2px solid #b2221b;
border-radius: 4px;
display: block;
height: 16px;
opacity: 0.9;
outline: none;
padding: 0;
width: calc(100% - 4px);
}
.paycalc input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 16px;
height: 20px;
/* 16px + 2x2px */
background: #b2221b;
cursor: pointer;
}
.paycalc input[type=range]::-moz-range-thumb {
width: 20px;
height: 20px;
background: #b2221b;
cursor: pointer;
}
.calcSlider {
margin-bottom: 0;
width: calc(100% - 100px);
}
#interestSlider {
direction: rtl;
}
.calcBox,
.interestBox,
.paymentBox {
background-color: #555;
border: 3px inset #909090;
border-radius: 2px;
color: white;
padding: 6px;
}
.calcBox {
margin-bottom: 0;
width: 62px;
}
.interestBox {
width: 100%;
}
.paymentBox {
width: calc(100% - 18px);
}
.calcBox div,
.paymentBox div {
color: inherit;
margin: 0;
}
.calcBox div:first-of-type,
.paymentBox div:first-of-type {
font-size: 12px;
width: 12px;
}
.calcBox div:last-of-type,
.paymentBox div:last-of-type {
font-size: 18px;
width: calc(100% - 14px);
}
<div id="calculator" class="financecalc">
<form id="myForm" class="paycalc">
<div class="calcSlider">
<label for="downPaymentSlider">Down Payment</label>
<input id="downPaymentSlider" name="downPaymentSlider" type="range" value="500" min="250" max="5000" step="50">
</div>
</form>
</div>
I intend to design a multiple choice question using an HTML file in a way that the choices appear horizontally. Here is what I have tried:
<checkbox-answer
options = question.tokens
answer2 = "question.answer"
>
</checkbox-answer>
Tokens refer to the choices that have to appear. However, they appear vertically like this:
choice 1
choice 2
choice 3
How can I modify it so that they appear horizontally like this?:
choice 1 choice 2 choice 3
You can use like this
.dbgOuter{
border: solid 1px #888;
border-radius: 4px;
padding: 3px 8px 0px 14px;
width: 340px;
margin: 0 auto;
font-size: 10.5pt;
}
.dbgCont{
display: inline-block;
height: 24px;
margin-left: 6px;
}
/* Base for label styling */
.dbgCheck:not(:checked),
.dbgCheck:checked {
position: absolute;
left: -9999px;
}
.dbgCheck:not(:checked) + label,
.dbgCheck:checked + label {
display:inline-block;
position: relative;
padding-left: 25px;
cursor: pointer;
}
/* checkbox aspect */
.dbgCheck:not(:checked) + label:before,
.dbgCheck:checked + label:before {
content: '';
position: absolute;
left:0; top: 1px;
width: 17px; height: 17px;
border: 1px solid #aaa;
background: #f8f8f8;
border-radius: 3px;
box-shadow: inset 0 1px 3px rgba(0,0,0,.3)
}
/* checkmark aspect */
.dbgCheck:not(:checked) + label:after,
.dbgCheck:checked + label:after {
content: '✔';
position: absolute;
top: 2px; left: 5px;
font-size: 14px;
color: #09ad7e;
transition: all .2s;
}
/* checked mark aspect changes */
.dbgCheck:not(:checked) + label:after {
opacity: 0;
transform: scale(0);
}
.dbgCheck:checked + label:after {
opacity: 1;
transform: scale(1);
}
/* disabled checkbox */
.dbgCheck:disabled:not(:checked) + label:before,
.dbgCheck:disabled:checked + label:before {
box-shadow: none;
border-color: #bbb;
background-color: #ddd;
}
.dbgCheck:disabled:checked + label:after {
color: #999;
}
.dbgCheck:disabled + label {
color: #aaa;
}
/* accessibility */
.dbgCheck:checked:focus + label:before,
.dbgCheck:not(:checked):focus + label:before {
border: 1px dotted blue;
}
.dbgCheck{
display:inline-block;
width:90px;
height:24px;
margin:1em;
}
/* Useless styles, just for demo design */
body {
font-family: "Open sans", "Segoe UI", "Segoe WP", Helvetica, Arial, sans-serif;
color: #666;
}
h1, h2 {
margin-bottom: 5px;
font-weight: normal;
text-align: center;
}
h2 {
margin: 5px 0 2em;
color: #aaa;
}
form {
width: 80px;
margin: 0 auto;
}
.txtcenter {
margin-top: 4em;
font-size: .9em;
text-align: center;
color: #aaa;
}
.copy {
margin-top: 2em;
}
.copy a {
text-decoration: none;
color: #4778d9;
}
<h2>horizontal checkboxes</h2>
<div class="dbgOuter">
<div class="dbgCont">
<input type="checkbox" id="dbgTrace" class="dbgCheck" />
<label for="dbgTrace">choice 1</label>
</div>
<div class="dbgCont">
<input type="checkbox" id="dbgDebug" class="dbgCheck" />
<label for="dbgDebug">choice 2</label>
</div>
<div class="dbgCont">
<input type="checkbox" id="dbgInfo" class="dbgCheck" checked="checked" />
<label for="dbgInfo">choice 3</label>
</div>
</div>
<p class="txtcenter">Custom styles on modern browsers.<br/>Classical checkboxes on IE8 and lower.</p>
I want to have the textfield just like gmail has right now. I mean when we focus on the text field, the label or placeholder goes to the top exactly at the top border line of its text field with no border line on the background of the label only. I tried but could not make it happen and i found the code in internet which did not work either. Here is what the code is
.FieldWrapper input[type="text"] {
box-sizing: border-box;
width: 100%;
height: calc(3em + 2px);
margin: 0 0 1em;
padding: 1em;
border: 1px solid #ccc;
background: #fff;
resize: none;
outline: none;
}
.FieldWrapper input[type="text"]:focus {
border-color: #00bafa;
}
.FieldWrapper input[type="text"]:focus+label[placeholder]:before {
color: #00bafa;
}
.FieldWrapper input[type="text"]:focus+label[placeholder]:before,
.FieldWrapper input[type="text"]:valid+label[placeholder]:before {
transition-duration: 0.2s;
-webkit-transform: translate(0, -1.5em) scale(0.9, 0.9);
transform: translate(0, -1.5em) scale(0.9, 0.9);
}
.FieldWrapper input[type="text"]:invalid+label[placeholder][alt]:before {
content: attr(alt);
}
.FieldWrapper input[type="text"]+label[placeholder] {
display: block;
pointer-events: none;
line-height: 1.25em;
margin-top: calc(-1em - 2px);
margin-bottom: calc((3em - 1em) + 2px);
}
.FieldWrapper input[type="text"]+label[placeholder]:before {
content: attr(placeholder);
display: inline-block;
margin: 0 calc(1em + 2px);
padding: 0 2px;
color: #898989;
white-space: nowrap;
transition: 0.3s ease-in-out;
background-image: linear-gradient(to bottom, #fff, #fff);
background-size: 100% 5px;
background-repeat: no-repeat;
background-position: center;
}
<div class="FieldWrapper">
<input type='text' name="name" />
<label alt="field name" placeholder="field name" />
</div>
This is what exactly i was expecting
Try this:
.input-container {
position: relative;
font-family: Arial;
}
.input-container input {
height: 32px;
line-height: 24px;
border-radius: 8px;
border: 1px solid #dcdcdc;
min-width: 300px;
padding: 4px 8px;
transition: all .2s ease;
}
.input-container label {
position: absolute;
top: 12px;
left: 4px;
background-color: #fff;
padding: 0 4px;
font-size: 14px;
pointer-events: none;
transition: all .2s ease;
}
.input-container input:focus {
outline: none;
border: 1px solid #3f51b5;
}
.input-container input:valid + label,
.input-container input:focus + label {
top: -8px;
color: #3f51b5;
}
<div class="input-container">
<input id="my-input" type="text" required>
<label for="my-input">My input label</label>
</div>
I have a custom checkbox which I want to add a tick mark inside it when checked
Here is code snippet:
input[type="checkbox"] {
transform: scale(3, 3) !important;
margin: 0px 21px;
}
.checkbox-custom,
.checkbox-custom-label {
display: inline-block;
vertical-align: middle;
margin: 5px 7px;
cursor: pointer;
font-size: 2.4rem;
font-family: "FuturaPT_BOOK";
/* padding: 6px; */
}
[type="checkbox"]:not(:checked)+label:after,
[type="checkbox"]:checked+label:after {
content: '✔';
position: absolute;
top: 8px;
left: 10px;
font-size: 24px;
line-height: 0.8;
color: #fff;
transition: all .2s;
}
.checkbox-custom+.checkbox-custom-label:before {
content: '';
background: #fff;
border: 1px solid #000;
display: inline-block;
vertical-align: middle;
width: 30px;
height: 30px;
padding: 2px;
margin-right: 30px;
text-align: center;
border-radius: 24%;
}
.checkbox-custom:checked+.checkbox-custom-label:before {
background: #0000;
box-shadow: inset 0px 0px 0px 4px #fff;
}
<p class="checkbox">
<input type="checkbox" class="checkbox checkbox-custom" name="cgv" id="cgv" value="1" {if $checkedTOS}checked="checked" {/if} />
<label class="checkbox-custom-label" for="cgv">{l s='I agree to the terms of service' mod='threepagecheckout'}</label>
{l s='(Read the Terms of Service)' mod='threepagecheckout'}
</p>
unfortunately when I click on check box nothing is displayed, I have tried different combination but nothing worked,
what am I doing wrong?
First you have to hide the default checkbox:
[type="checkbox"] {
display: none
}
Then put some general styling for label:after:
[type="checkbox"]+label:after {
content: '';
position: absolute;
...
}
Then style the :checked state
[type="checkbox"]:checked+label:after {
content: '✔';
}
And also position the tick mark so that it appears correctly in middle of your custom checkbox. Your tick mark was outside the box.
input[type="checkbox"] {
transform: scale(3, 3) !important;
margin: 0px 21px;
}
.checkbox-custom,
.checkbox-custom-label {
display: inline-block;
vertical-align: middle;
margin: 5px 7px;
cursor: pointer;
font-size: 2.4rem;
font-family: "FuturaPT_BOOK";
/* padding: 6px; */
}
[type="checkbox"] {
display: none
}
[type="checkbox"]+label:after {
content: '';
position: absolute;
top: 31px;
left: 23px;
font-size: 24px;
line-height: 0.8;
color: #fff;
transition: all .2s;
}
[type="checkbox"]:checked+label:after {
content: '✔';
}
.checkbox-custom+.checkbox-custom-label:before {
content: '';
background: #fff;
border: 1px solid #000;
display: inline-block;
vertical-align: text-top;
width: 30px;
height: 30px;
padding: 2px;
margin-right: 30px;
text-align: center;
border-radius: 24%;
}
.checkbox-custom:checked+.checkbox-custom-label:before {
background: #000;
box-shadow: inset 0px 0px 0px 4px #fff;
}
<p class="checkbox">
<input type="checkbox" class="checkbox checkbox-custom" name="cgv" id="cgv" value="1" />
<label class="checkbox-custom-label" for="cgv">I agree to the terms of service</label>
Read the Terms of Service
</p>
i have modified my code
/* Base for label styling */
[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
position: absolute;
left: -9999px;
}
[type="checkbox"]:not(:checked) + label,
[type="checkbox"]:checked + label {
position: relative;
padding-left: 1.95em;
cursor: pointer;
}
/* checkbox aspect */
[type="checkbox"]:not(:checked) + label:before,
[type="checkbox"]:checked + label:before {
content: '';
position: absolute;
left: 0; top: 0;
width: 1.25em; height: 1.25em;
border: 2px solid #ccc;
background: #fff;
border-radius: 4px;
box-shadow: inset 0 1px 3px rgba(0,0,0,.1);
}
/* checked mark aspect */
[type="checkbox"]:not(:checked) + label:after,
[type="checkbox"]:checked + label:after {
content: '\2713\0020';
position: absolute;
top: .15em; left: .22em;
font-size: 1.3em;
line-height: 0.8;
color: #09ad7e;
transition: all .2s;
font-family: 'Lucida Sans Unicode', 'Arial Unicode MS', Arial;
}
/* checked mark aspect changes */
[type="checkbox"]:not(:checked) + label:after {
opacity: 0;
transform: scale(0);
}
[type="checkbox"]:checked + label:after {
opacity: 1;
transform: scale(1);
}
<p class="checkbox">
<input type="checkbox" class="checkbox checkbox-custom" name="cgv" id="cgv" value="1" {if $checkedTOS}checked="checked" {/if} />
<label class="checkbox-custom-label" for="cgv">{l s='I agree to the terms of service' mod='threepagecheckout'}</label>
{l s='(Read the Terms of Service)' mod='threepagecheckout'}
</p>