I'm trying to make an input field with a button and custom sprite image inside of it.
The input should change the border color and show the button with an
icon while hovering. Additionally while hovering both input and
button, the icon should be changed.
Right now the icon changes with input:focus while dismissing the border of the input.
If somebody can guide me in the right direction, it would be greatly appreciated.
Here's what I came up so far:
HTML
<form class="b-editor-item col-3">
<input type="text" placeholder="D" class="b-editor-d-input" />
<button type="button" class="b-editor-button-delete">
<div class="b-editor-icon-trash"></div>
</button>
</form>
SCSS
input[type="text"] {
border: 1px solid transparent;
}
.b-editor {
&-item {
display: flex;
align-items: center;
}
&-button-delete {
border: none;
height: 24px;
width: 24px;
overflow: hidden;
background-color: transparent;
}
&-d-input {
color: black;
background-color: #eaeaea;
border-radius: 6px;
width: 90%;
margin-right: -3.25rem;
height: 2rem;
}
&-icon-trash {
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/1044597/trash.png);
background-repeat: no-repeat;
background-position: -28px 0;
background-size: 300%;
height: 20px;
width: 20px;
padding: 5px 2px;
}
&-d-input:hover + &-button-delete:hover > &-icon-trash,
&-d-input:focus + &-button-delete:hover > &-icon-trash {
background-position: -52px 0;
}
&-d-input + &-button-delete {
display: none;
}
&-d-input:hover + &-button-delete,
&-d-input:focus + &-button-delete,
&-d-input:hover + &-button-delete:hover {
display: block;
}
&-d-input:hover,
&-d-input:hover + &-button-delete:hover {
border: 1px solid #00c8aa !important;
}
}
Try to add these 2 rules:
button.b-editor-button-delete:hover {
display: block;
}
button.b-editor-button-delete:hover .b-editor-icon-trash {
background-position: -52px 0;
}
Related
I have the below code to make a login form but i cant get the checkbox label to be like always against the edge of the text area. I always sits to the right of the text area. I cant get it to be dependant on the div it is in. On inspection it sits outside the div.
Different things i have tried have included giving the label a left value but this messes it up when the screen size changes.
I want something like this
Here is a jsfiddle if this is easier
function showHidePassword() {
var x = document.getElementById("pass");
if (x.type === "password") {
x.type = "text";
} else {
x.type = "password";
}
}
body {
background-color: #ffffff;
}
* {
box-sizing: border-box;
}
input[type=text],
select,
textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical;
}
input[type=password],
select,
textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical;
}
label {
padding: 12px 12px 12px 0;
display: inline-block;
}
input[type=submit] {
background-color: #4CAF50;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
float: right;
}
input[type=submit]:hover {
background-color: #45a049;
}
.container1 {
border-radius: 25px;
background-color: #f2f2f2;
padding: 40px;
position: center;
margin: 15% 30%;
}
.signup {
border-radius: 25px;
background-color: #f2f2f2;
padding: 40px;
position: center;
opacity: 0.96;
}
.container1 .new-body {
background: #f2f2f2;
}
.signup .new-body {
background: #f2f2f2;
}
.signup .row {
padding-top: 5px;
}
.col-25 {
float: left;
width: 25%;
margin-top: 6px;
}
.col-75 {
float: left;
width: 65%;
margin-top: 6px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
#media screen and (max-width: 600px) {
.col-25,
.col-75,
input[type=submit] {
width: 100%;
margin-top: 0;
}
.col-70,
input[type=submit] {
width: 95%;
margin-top: 0;
}
}
.passw {
cursor: pointer;
width: 30px;
height: 20px;
}
.col-75 label {
padding-top: 16px;
position: absolute;
z-index: 100;
}
<form>
<div class="row">
<div class="col-25">
<label for="pass">Password</label>
</div>
<div class="col-75">
<input type="password" id="pass" name="password" minlength="5" pattern="[A-Za-z][A-Za-z0-9]*[0-9][A-Za-z0-9]*" placeholder="Password" title="A valid password is a set of 5 characters, each consisting of an
upper or lower-case letter, or a digit. The password must begin with a letter and contain at least one digit" autocomplete="current-password" required>
<label for="passShowIcon" id="showHide"><input name="passShowIcon" type="checkbox" class="passw" onclick="showHidePassword();">
<span class=" "></span></label>
</div>
</div>
<div class="row">
<input type="submit" value="Submit">
</div>
</form>
If you wanted to make sure the checkbox appears inside the text input. You could wrap both input fields with a relative class, and then apply absolute positioning to the checkbox.
Like so:
https://jsfiddle.net/x0o46g7a/2/
.wrapper {
position: relative;
}
.text {
width: 100%;
height: 100%;
}
.checkbox {
position: absolute;
top: -8px;
right: -8px;
}
Something to note:
I would recommend adding some padding-right to your text input, to make sure it's text does not overlap/underlap the absolute positioned checkbox.
Based on your code, add the following rules in your css.
float: right to .col-75 instead of float left
right: 0 to .col-75 label
those will ensure that checkbox will remain inside the input field.
I am new to html and css and i am working on a project where i want to use custom check boxes.
I am trying to hide a check-box with an image via css. I dont want to re-write the html if i dont have to. Ive got my image to cover the check box using (display:none; )but this has also disabled my check box. Is there a way to make my check-box usable without displaying?
input[type='checkbox']
{
display: none;
}
input[type='checkbox'] + label
{
background: url('/Pictures/checkbox_unchecked.jpg')no-repeat;
height: 30px;
width: 30px;
background-size: 100%;
display:inline-block;
padding: 0 0 0 0px;
}
input[type='checkbox']:checked + label
{
background: url('Pictures/checkbox_checked.jpg') no-repeat;
height: 50px;
width: 200px;
background-size: 100%;
display:inline-block;
padding: 0 0 0 0px;
}
You can set the opacity of the checkbox to 0. This still makes it clickable.
Example (click inside the black rectangle):
#checkbox {
opacity: 0;
}
#container {
border: 2px solid black;
width: 20px;;
}
<div id="container">
<input type="checkbox" id="checkbox" onclick="alert('hello')"/>
</div>
label input {
opacity: 0;
width: 0;
height: 0;
overflow: hidden;
margin: 0;
padding: 0;
}
label span.y {
display: none;
}
label span.n {
display: inline;
}
label input:checked ~span.y {
display: inline;
}
label input:checked ~span.n {
display: none;
}
<label>
<input type="checkbox" value="1">
<span class="y">Checked!</span>
<span class="n">Click me!</span>
</label>
Just change span.y and span.n. to your elements (images or something else).
input[type='checkbox'] {
display: block;
height: 0;
width: 0;
opacity: 0;
overflow: hidden;
}
input[type='checkbox'] + label {
background: url('http://lorempixel.com/30/30/') no-repeat;
height: 30px;
width: 30px;
background-size: cover;
display: inline-block;
}
input[type='checkbox']:checked + label {
background: url('http://lorempixel.com/50/200/') no-repeat;
height: 50px;
width: 200px;
background-size: cover;
display: inline-block;
}
<input type="checkbox" id="check" />
<label for="check"></label>
Im im trying to create custom checkboxes in GWT using only CSS
So far i was able to style checkboxes that DO NOT have text near them.
However checkboxes with text are looking messy
Current state:
Desired behaviour:
<span class="gwt-CheckBox" id="i294">
<input tabindex="0" id="gwt-uid-3" type="checkbox" value="on">
<label for="gwt-uid-3">Run task immediately after finish</label>
</span>
HTML
input[type="checkbox"] {
visibility: hidden;
}
input[type="checkbox"]+label {
display: inline-block;
width: 16px;
height: 16px;
background: url(images/custom_html_elements_sprite.png) 0 0;
}
input[type="checkbox"]:checked+label {
display: inline-block;
width: 16px;
height: 16px;
background: url(images/custom_html_elements_sprite.png) -64px 0;
}
CSS
Any help would be appreciated
EDIT:
fiddle provided
https://jsfiddle.net/2j0zke2z/
It solves all problems: (you can set higher padding if you want)
input[type="checkbox"] {
visibility: hidden;
}
input[type="checkbox"]+label {
display: inline;
width: 16px;
height: 16px;
padding:0 0 0 16px;
background: url(https://cdn2.iconfinder.com/data/icons/aspneticons_v1.0_Nov2006/ok_16x16.gif);
background-repeat: no-repeat;
}
input[type="checkbox"]:checked+label {
display: inline;
width: 16px;
height: 16px;
padding:0 0 0 16px;
background: url(http://orig03.deviantart.net/9b11/f/2008/101/c/5/war_skull_16x16__by_xicidal.gif);
background-repeat: no-repeat;
}
This is what you are looking for, just change images, cus I took some by default:
span {
margin-right: 10px;
}
input[type="checkbox"] +
label span {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGYAAABmCAMAAAAOARRQAAAAUVBMVEX///8zMzMwMDBEREQqKiotLS3s7OwnJydcXFxJSUkkJCRDQ0P19fVhYWGZmZnd3d1VVVWvr684ODjFxcWKiopvb2+7u7t1dXX5+flpaWnW1ta78F6SAAABiElEQVRoge2ay5aDIBBEG3kp+EDxmf//0JkMYJwzZpERe9W1Mwtuym6OiyqAg2rlx8lZdlHWTaNXNZxLzctghCyuUhgrpDDDMqszyjxJkQGxo4Sc5j+QdRtkPkaQHLb1N+XBdUYnSYXmjyPFV9mtBMnKH7xU4vgfLutwmKh2PyvfvUihDbP8kiwzWrxO5Gk+m04/sabt3qz7R+rahiWQ3uImD9GlcP27O/Wx6t7FQRTDz16rKXJ1mcVJUlfGlySn5z2dI0WUp7f2/1Jl9CO/7dRLeJAuq5enOhcciKUGlSbT56YA9Gk6CrwJZpps03+pboId42EM70y0+SkAbTx8hLhnOvtknup03DVwYTTmDgpAmEjhIHwrC3YPhgUTFuIy2HswNq5xwvB7MJwwhCEMYQhDGMIQhjCEIQxhCEMYwhCGMIQhDGEIQxjCEAYPc3ewghQTIYVeSBEeUiCJFK8ihcVI0TdSkI9VS0AqWWBVRrAKMEh1HqxyElbVCqs4Bkg1OMAq9cGdFcUvpGkd5VrzEsoAAAAASUVORK5CYII=');
background-size: 20px;
height: 17px;
width: 17px;
display: inline-block;
vertical-align: middle;
margin-top: -5px;
}
input[type="checkbox"]:checked + label span {
background: transparent;
}
input[type="checkbox"]:checked + label span::before {
content: "";
background-image: url('https://cdn4.iconfinder.com/data/icons/customicondesignoffice2/128/success.png');
background-size: 20px;
height: 17px;
width: 17px;
display: inline-block;
}
input[type="checkbox"] {
display: none;
}
<input tabindex="0" id="gwt-uid-3" type="checkbox" value="on">
<label for="gwt-uid-3"><span></span>Run task immediately after finish</label>
CSS :
input[type="checkbox"]+label {
display: inline-block;
width: auto;
height: 16px;
background: url(images/custom_html_elements_sprite.png) 0 0;
}
input[type="checkbox"]:checked+label {
display: inline-block;
width: auto;
height: 16px;
background: url(images/custom_html_elements_sprite.png) -64px 0;
}
Does you really want width of 16px only, If you keep it auto it will solve your problem.
Please check this fiddle Link provided here.
Text has been wrapped due to specified width.
Just remove the width and add padding-left as necessary. Also include no-repeat to your background image. Updated fiddle
Note: You can resize the background image using background-size
Snippet
input[type="checkbox"] {
visibility: hidden;
}
input[type="checkbox"]+label {
cursor: pointer;
padding-left: 20px;
display: inline-block;
height: 16px;
background: url(https://cdn2.iconfinder.com/data/icons/aspneticons_v1.0_Nov2006/ok_16x16.gif) no-repeat;
}
input[type="checkbox"]:checked+label {
padding-left: 20px;
display: inline-block;
height: 16px;
/* background: transparent; */
background: url(http://orig03.deviantart.net/9b11/f/2008/101/c/5/war_skull_16x16__by_xicidal.gif) no-repeat;
}
<span class="gwt-CheckBox" id="i294">
<input tabindex="0" id="gwt-uid-3" type="checkbox" value="on">
<label for="gwt-uid-3">Run task immediately after finish</label>
</span>
Add Padding-left:20px to your label and remove the width and height form label. Also include no-repeat to your background image.
input[type="checkbox"]+label {
display: inline-block;
background: url(images/custom_html_elements_sprite.png) 0 0 no-repeat;
padding-left:20px;
}
input[type="checkbox"]:checked+label {
display: inline-block;
background: url(images/custom_html_elements_sprite.png) -64px 0 no-repeat;
}
Updated fiddle : https://jsfiddle.net/2j0zke2z/2/
Edited :
is this you want?
input[type="checkbox"] {
visibility: hidden;
}
input[type="checkbox"]+label {
display: inline-block;
background: url(https://cdn2.iconfinder.com/data/icons/aspneticons_v1.0_Nov2006/ok_16x16.gif) 0 0;
background-repeat:no-repeat;
padding-left:25px;
}
input[type="checkbox"]:checked+label {
display: inline-block;
background: url(http://orig03.deviantart.net/9b11/f/2008/101/c/5/war_skull_16x16__by_xicidal.gif) 0px 0px;
background-repeat:no-repeat;
padding-left:25px;
}
<span class="gwt-CheckBox" id="i294">
<input tabindex="0" id="gwt-uid-3" type="checkbox" value="on">
<label for="gwt-uid-3">Run task immediately after finish</label>
</span>
I'm trying to get full screen background image for this container:
<div class="header"
<div class="container">
<div class="row">
<div class="col-lg-12">
<h2 class="text-center">test1</h2>
<p class="lead text-center">test2</p>
<p class="text-center"><a class="btn btn-lg btn-success"
href="http://localhost/"><span
class="glyphicon glyphicon-plus"></span> something</a></p>
</div>
</div>
</div>
But, the picture is showing without fullscreen view and i'm trying to get something like this:
http://ironsummitmedia.github.io/startbootstrap-business-frontpage/
and i followed every tutorial for it, but nothing is worked.!
i'm not sure if i'm using Yii2 with this bootstrapmakes any sense.
Btw, this is my site.css
html,
.my-navbar {
background-color: #ffffff;
height: 10px;
border-bottom: 1px solid #eeeeee;
}
body {
height: 100%;
background: #F5F5F5;
}
.footer {
height: 180px;
background-color: white;
border-top: 1px solid #eeeeee;
padding-top: 20px;
}
.wrap {
min-height: 100%;
height: auto;
margin: 0 auto -60px;
padding: 0 0 60px;
}
.wrap > .container {
padding: 70px 15px 20px;
}
.header {
height: 400px;
background: url('../images/header.jpg') no-repeat center center;
min-height:100%;
background-size:100px 150px;
-webkit-background-size: cover;
-moz-background-size: cover;
width: 100%;
-o-background-size: cover;
}
.jumbotron .btn {
font-size: 21px;
padding: 14px 24px;
}
.not-set {
color: #c55;
font-style: italic;
}
/* add sorting icons to gridview sort links */
a.asc:after, a.desc:after {
position: relative;
top: 1px;
display: inline-block;
font-family: 'Glyphicons Halflings', fantasy;
font-style: normal;
font-weight: normal;
line-height: 1;
padding-left: 5px;
}
a.asc:after {
content: /*"\e113"*/ "\e151";
}
a.desc:after {
content: /*"\e114"*/ "\e152";
}
.sort-numerical a.asc:after {
content: "\e153";
}
.sort-numerical a.desc:after {
content: "\e154";
}
.sort-ordinal a.asc:after {
content: "\e155";
}
.sort-ordinal a.desc:after {
content: "\e156";
}
.grid-view th {
white-space: nowrap;
}
.hint-block {
display: block;
margin-top: 5px;
color: #999;
}
.error-summary {
color: #a94442;
background: #fdf7f7;
border-left: 3px solid #eed3d7;
padding: 10px 20px;
margin: 0 0 15px 0;
}
What should i do for achieve full screen background image like this example in header?
http://ironsummitmedia.github.io/startbootstrap-business-frontpage/
Add this to the header css
position: absolute;
top: 0;
left: 0;
right: 0;
It should work now.
Could you try to putt it up as an example on Codepen?
Your div class "header" doesn't have an ending ">" which might be causing some problems.
Try with the following in the CSS where the background img is specified:
background-size:cover;
Add a other class with container class and use background image with cover option. Here i use .bimg for example.
<div class="container bimg"></div>
.bimg{
width:100%;
background:url('PATH');
}
Is there a possibility to change the buttons image to button_pressed.png while the button is pressed and change it back to button_unpressed.png when the button is released again?
EDIT
I have the following HTML:
<header id="toolbar">
<div id="toolbar_back">
<form action="#/">
<input type="image" />
</form>
</div>
<h1 id="toolbar_title">Photo Prints</h1>
</header>
And the following CSS:
#toolbar {
background: #FFFFFF;
height: 60px;
width: 100%;
margin: 0;
padding: 0;
box-shadow: 0px 2px 1px #888888;
display: table;
}
#toolbar_title {
color: black;
font-size: 30px;
text-align: center;
display: table-cell;
vertical-align: middle;
}
#toolbar_back {
padding-left: 10px;
display: table-cell;
vertical-align: middle;
}
#toolbar_back input {
background: url("../img/toolbar/toolbar_back.png");
}
#toolbar_back input:active {
background: url("../img/toolbar/toolbar_back_pressed.png");
}
But with this the result is the following:
I just want the background images to be shown and i want them to be fully shown.
You'd want to make the button a background image:
#button input {
background-image: url("img/button_unpressed.png");
background-size: cover; /* or 'contain' */
background-repeat: no-repeat;
}
#button input:active,
#button input:focus {
background-image: url("img/button_pressed.png");
}
You'll probably also need to remove border and other styles to only show your background image.