I'm trying to do tabs in CSS but I'm stuck. My tabs work well but I want the menu to be 100% wide. There, it stops after the "Tab4", how can I do this ?
I'm currently learning HTML and CSS, so sorry if it's a dumb question :o
Below this is my code
body {
background-color: #161719;
color: #fff;
}
div.tab-frame>input {
display: none;
}
div.tab-frame>label {
background-color: rgba(1, 1, 1, 0.30);
display: block;
float: left;
font-size: 30px;
padding: 0 20px 7px 20px;
cursor: pointer;
margin-bottom: 0;
color: rgba(255, 255, 255, .5);
font-weight: 400;
border-top: 1px solid rgba(255, 255, 255, 0.15);
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
transition: 0.3s;
}
div.tab-frame>label:hover {
color: rgba(255, 255, 255, .9);
}
div.tab-frame input:checked+label {
/* background:rgba(255,255,255,.03); */
color: #ff4052;
cursor: default;
}
div.tab-frame div.tab {
display: none;
padding-top: 10px;
clear: left;
}
div.tab-frame input:nth-of-type(1):checked~.tab:nth-of-type(1),
div.tab-frame input:nth-of-type(2):checked~.tab:nth-of-type(2),
div.tab-frame input:nth-of-type(3):checked~.tab:nth-of-type(3),
div.tab-frame input:nth-of-type(4):checked~.tab:nth-of-type(4) {
display: block;
}
div.tab-frame>label:nth-of-type(1) {
border-left: 1px solid rgba(255, 255, 255, 0.15);
}
div.tab-frame>label:nth-of-type(4) {
border-right: 1px solid rgba(255, 255, 255, 0.15);
}
<div class="tab-frame">
<input type="radio" checked name="tab" id="tab1">
<label for="tab1">Tab 1</label>
<input type="radio" name="tab" id="tab2">
<label for="tab2">Tab 2</label>
<input type="radio" name="tab" id="tab3">
<label for="tab3">Tab 3</label>
<input type="radio" name="tab" id="tab4">
<label for="tab4">Tab 4</label>
<div class="tab">content 1</div>
<div class="tab">content 2</div>
<div class="tab">content 3</div>
<div class="tab">content 4</div>
</div>
change css of div.tab-frame>label
div.tab-frame>label {
background-color: rgba(1, 1, 1, 0.30);
/* display: block; */
/* float: left; */
font-size: 30px;
padding: 0 20px 7px 20px;
cursor: pointer;
margin-bottom: 0;
color: rgba(255, 255, 255, .5);
font-weight: 400;
border-top: 1px solid rgba(255, 255, 255, 0.15);
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
transition: 0.3s;
display: inline-block; // Added
width: 24.5%; // Added
box-sizing: border-box; // Added
}
Try this out. Hope its helps.
*{
box-sizing: border-box;
}
body {
background-color: #161719;
color: #fff;
}
div.tab-frame>input {
display: none;
}
div.tab-frame>label {
background-color: rgba(1, 1, 1, 0.30);
display: block;
float: left;
font-size: 30px;
padding: 0 20px 7px 20px;
cursor: pointer;
margin-bottom: 0;
color: rgba(255, 255, 255, .5);
font-weight: 400;
border-top: 1px solid rgba(255, 255, 255, 0.15);
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
transition: 0.3s;
width: 25%;
text-align:left;
}
div.tab-frame>label:hover {
color: rgba(255, 255, 255, .9);
}
div.tab-frame input:checked+label {
/* background:rgba(255,255,255,.03); */
color: #ff4052;
cursor: default;
}
div.tab-frame div.tab {
display: none;
padding-top: 10px;
clear: left;
}
div.tab-frame input:nth-of-type(1):checked~.tab:nth-of-type(1),
div.tab-frame input:nth-of-type(2):checked~.tab:nth-of-type(2),
div.tab-frame input:nth-of-type(3):checked~.tab:nth-of-type(3),
div.tab-frame input:nth-of-type(4):checked~.tab:nth-of-type(4) {
display: block;
}
div.tab-frame>label:nth-of-type(1) {
border-left: 1px solid rgba(255, 255, 255, 0.15);
}
div.tab-frame>label:nth-of-type(4) {
border-right: 1px solid rgba(255, 255, 255, 0.15);
}
<div class="tab-frame">
<input type="radio" checked name="tab" id="tab1">
<label for="tab1">Tab 1</label>
<input type="radio" name="tab" id="tab2">
<label for="tab2">Tab 2</label>
<input type="radio" name="tab" id="tab3">
<label for="tab3">Tab 3</label>
<input type="radio" name="tab" id="tab4">
<label for="tab4">Tab 4</label>
<div class="tab">content 1</div>
<div class="tab">content 2</div>
<div class="tab">content 3</div>
<div class="tab">content 4</div>
</div>
Related
How do I convert standard CSS with special attributes like "type" and "active", to Styled-Components consts?
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
background: #fff;
padding: 40px;
border: 1px solid rgba(0, 0, 0, 0.1);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
input[type='submit'] {
background: #00aec9;
color: #fff;
cursor: pointer;
margin-bottom: 0;
text-transform: uppercase;
width: 100%;
border-radius: 5px;
height: 35px;
border-color: transparent;
box-shadow: 0px;
outline: none;
transition: 0.15s;
text-align: center;
}
input[type='submit']:active {
background-color: #f1ac15;
}
I managed to create the const for the .box CSS class but not sure how to achieve this with "input[type='submit']" and "input[type='submit']:active"
//---- .box class ------ //
const DivBox = styled.div`
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
background: #fff;
padding: 40px;
border: 1px solid rgba(0, 0, 0, 0.1);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
`
Any assistance would be greatly appreciated
PS, I am using React and Nextjs
What I currently have:
What I want:
My current Component Code:
import Layout from '../components/MyLayout.js'
import styled from 'styled-components'
const DivBox = styled.div`
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
background: #fff;
padding: 40px;
border: 1px solid rgba(0, 0, 0, 0.1);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
`
const Input = styled.input.attrs({ type: 'submit' })`
background: #00aec9;
color: #fff;
cursor: pointer;
margin-bottom: 0;
text-transform: uppercase;
width: 100%;
border-radius: 5px;
height: 35px;
border-color: transparent;
box-shadow: 0px;
outline: none;
transition: 0.15s;
text-align: center;
&:active {
background-color: #f1ac15;
}
`
export default function About() {
return (
<Layout>
<DivBox>
<p>This is the about page</p>
<h2>Sample Form</h2>
<div className="form-label-group">
<input
type="email"
id="inputEmail"
className="form-control"
placeholder="Email address"
required
autoFocus
/>
<label htmlFor="inputEmail">Email address</label>
</div>
<div className="form-label-group">
<input
type="password"
id="inputPassword"
className="form-control"
placeholder="Password"
required
/>
<label htmlFor="inputPassword">Password</label>
</div>
<div>
<input type="submit" value="Submit" />
</div>
</DivBox>
</Layout>
)
}
Additional CSS:
.form-control:focus {
border-color: #00aec9;
box-shadow: 0 0 0 0.2rem rgba(19, 162, 228, 0.25);
}
.form-label-group input:not(:placeholder-shown) ~ label {
color: #00aec9;
}
I guess you can achieve that by:
const Input = styled.input.attrs({
type: 'submit',
value: 'Submit'
})`
background: #00aec9;
color: #fff;
cursor: pointer;
margin-bottom: 0;
text-transform: uppercase;
width: 100%;
border-radius: 5px;
height: 35px;
border-color: transparent;
box-shadow: 0px;
outline: none;
transition: 0.15s;
text-align: center;
&:active {
background-color: #f1ac15;
}
`
And replace
<input type="submit" value="Submit" />
with
<Input />
More informations on attrs here
I'm currently working on a footer. There are 3 input-elements as you can see in the picture. Now, if you click on a input, the border-top becomes white. And now I want to achieve: if a input-field is filled with text and I click on another element, a green border-top has to appear. Which pseudo class do I have to use?
HTML:
<div id="footer">
<ul>
<li> <input type="text" name="name" placeholder="Name"> </li>
<li> <input type="text" name="email" placeholder="Email"> </li>
<li> <input class="last" type="text" name="message" placeholder="Message"> </li>
</ul>
</div>
CSS:
#footer {
width: 100%;
background-color: rgba(0, 0, 0, 0.8);
text-align: center;
padding: 20px 0px;
}
input {
padding: 10px 5%;
background: rgba(0, 0, 0, 0.4);
outline: none;
width: 60%;
margin-bottom: 30px;
font-family: Roboto-Thin;
color: white;
border: none;
border-bottom: 2px solid rgba(255, 255, 255, 0.0);
border-top: 2px solid rgba(255, 255, 255, 0.0);
font-size: 18px;
transition: 0.2s;
}
.last {
margin-bottom: 0px;
}
input:focus {
border-top: 2px solid white;
}
[1]: https://i.stack.imgur.com/4ZE0K.png
Since you're using placeholders, you can use :not(:placeholder-shown):not(:focus)
#footer {
width: 100%;
background-color: rgba(0, 0, 0, 0.8);
text-align: center;
padding: 20px 0px;
}
input {
padding: 10px 5%;
background: rgba(0, 0, 0, 0.4);
outline: none;
width: 60%;
margin-bottom: 30px;
font-family: Roboto-Thin;
color: white;
border: none;
border-bottom: 2px solid rgba(255, 255, 255, 0.0);
border-top: 2px solid rgba(255, 255, 255, 0.0);
font-size: 18px;
transition: 0.2s;
}
.last {
margin-bottom: 0px;
}
input:focus {
border-top: 2px solid white;
}
input:not(:placeholder-shown):not(:focus) {
border-top: 1px solid green;
}
<div id="footer">
<ul>
<li> <input type="text" name="name" placeholder="Name"> </li>
<li> <input type="text" name="email" placeholder="Email"> </li>
<li> <input class="last" type="text" name="message" placeholder="Message"> </li>
</ul>
</div>
Getting some weird behaviour with Twitter typeahead. It correctly fetches the data and displays a drowndown list after 3 characters are input, but it does NOT autocomplete the field, nor highlight/select the item. What have I done wrong?
I have the following javascript (after all the relevant jquery and typeahead stuff):
$(function ()
{
var customers = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: {
url: '/api/customers?query=%QUERY',
wildcard: '%QUERY'
}
});
$('#customer').typeahead
(
{
minLength: 3,
highlight: true
},
{
name: 'customers',
display: 'name',
source: customers
}
);
});
relevant part of the webpage
<form>
<div class="form-group">
<label>Customer</label>
<input id="customer" type="text" value="" class="form-control" />
</div>
<div class="form-group">
<label>Movie</label>
<input id="movie" type="text" value="" class="form-control" />
</div>
<button class="btn btn-primary">Submit</button>
</form>
And the css:
.typeahead {
background-color: #fff;
}
.typeahead:focus {
border: 2px solid #0097cf;
}
.tt-query {
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.tt-hint {
color: #999
}
.tt-menu {
width: 422px;
margin: 12px 0;
padding: 8px 0;
background-color: #fff;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, 0.2);
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
-moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
box-shadow: 0 5px 10px rgba(0,0,0,.2);
}
.tt-suggestion {
padding: 3px 20px;
font-size: 18px;
line-height: 24px;
}
.tt-suggestion:hover {
cursor: pointer;
color: #fff;
background-color: #0097cf;
}
.tt-suggestion.tt-cursor {
color: #fff;
background-color: #0097cf;
}
.tt-suggestion p {
margin: 0;
}
It seems to get rendered out as:
<input id="customer" type="text" value="" class="form-control tt-input" autocomplete="off" spellcheck="false" dir="auto" style="position: relative; vertical-align: top; background-color: transparent;">
Which is interesting, as it says
autocomplete="off"
but changing that doesn't help...
It turns out that my controller was returning an IHttpActionResult rather than the IEnumerable<Customer> that I was expecting. I don't KNOW if that was the issue, but now that I have fixed that, it works..
I am trying to display checkbox using XML worker but unable to do so. I have also tried through CSS but still not able to display the same when converting HTML to PDF. I am using "itextpdf-5.4.2.jar" and "xmlworker-5.4.1.jar". Request you to please help me with an alternative solution other than YaHP Converter because i already completed 90% of my coding. Thanks in advance !!!!
Following is the sample HTML code which i have tried:
<HTML>
<HEAD>
<script>
label {
display: inline-block;
cursor: pointer;
position: relative;
padding-left: 25px;
margin-right: 15px;
font-size: 13px;
margin-bottom: 10px;
}
label:before {
content:"";
display: inline-block;
width: 16px;
height: 16px;
margin-right: 10px;
position: absolute;
left: 0;
bottom: 1px;
background-color: #aaa;
box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
border-radius: 3px;
}
input[type=checkbox] {
content:"\2713";
text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
font-size: 15px;
color: #f3f3f3;
text-align: center;
line-height: 15px;
}
input[type=checkbox]:checked + label:before {
content:"\2713";
text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
font-size: 15px;
color: #f3f3f3;
text-align: center;
line-height: 15px;
}
</script>
</HEAD>
<BODY>
<div class="checkbox">
<input id="check1" type="checkbox" name="check" value="check1" CHECKED/>
<label for="check1">Checkbox No. 1</label>
<br/>
<input id="check2" type="checkbox" name="check" value="check2"/>
<label for="check2">Checkbox No. 2</label>
<br/>
<input id="check3" type="checkbox" name="check" value="check3" checked/>
<label for="check3">Checkbox No. 3</label>
</div>
</BODY>
</HTML>
Following is the output in PDF:
Checkbox No. 1
Checkbox No. 2
Checkbox No. 3
Check this question in stackoverflow.HTML to PDF using iText : How can produce a checkbox
using the Unicode '☐' character you can create.
I want to add a little triangle to the right to overlap with the beginning of the input field but I haven't been able to. Here's my code:
HTML:
<div id="wrapper">
<form>
<label>First Name</label><input type="text" name="firstname" id="first" placeholder="Jorge" />
<label>Last Name</label><input type="text" name="lastname" id="last" placeholder="González" />
<label>Email</label> <input type="email" name="username" id="un" placeholder="jgon#gmail.com"/>
<label>Password</label> <input type="password" name="password" id="pass" placeholder="********" />
<input type="submit" value="Sign up" id="submit" />
</form>
</div>
CSS:
html{background-color:#000;}
label{
font-weight: bold;
background: -webkit-linear-gradient(#3073BF 0%, #204C7F 100%);
padding: .7em .85em .8em 0em;
display: block;
width: 100px;
float: left;
border-radius: .3em 0px 0px .3em;
margin: 5px 0;
color: #102640;
text-shadow: 0px 1px 1px #fff;/*rgba(0, 0, 0, 0.3);*/
height: 17px;
}
#wrapper{
width: 800px;
margin: 3em auto;
background: white;
padding: 2em 4em;
border-radius: .5em;
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.3);
}
form{
width: 330px;
margin: 0 auto;
text-align: right;
}
input{
padding: .5em;
border-radius: 0px 4px 4px 0px;
border: 1px solid #bcbcbc;
margin: .3em 0;
font-size: 1.1em;
}
#submit{
text-align: center;
clear: both;
float: none;
position: relative;
right:10px;
margin: 1em;
padding: 1em 3em;
background: -webkit-linear-gradient(#fff1ba 0%, #ffc400 100%);
border: 1px solid #ffb135;
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
font-weight: bolder;
color: #a74f00;
font-size: 1em;
text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.7);
cursor: pointer;
border-radius: .3em;
width:300px;
}
#submit:hover{
background: -webkit-linear-gradient(#ffc400 0%, #fff1ba 100%);
}
and the link to the fiddle: http://jsfiddle.net/Luis_Armando/HeDVy/
To create a triangle you can use following css. Add to your code as required.
.triangle{
width: 0px;
height: 0px;
border-style: solid;
border-width: 30px 0 30px 20px;
border-color: transparent transparent transparent #007bff;
}
Change border-width parameters to change size of triangle.