i'm creating a form and I want to put an icon into the input text, but when it comes to preview the text is put over the icon and I don't know how to fix it
the html looks like this
<div id="name"> <input type="text" name="username" placeholder="Nombre"> </div>
and the css as well
#name{
float:left;
}
#name input {
font:'Montserrat', sans-serif;
font-weight:700;
font-size:24px;
border-radius: 2.5px;
border: 5px solid #000;
background-color:transparent;
color:#56828B;
width:300px;
height:30px;
background-image:url(../imgs/nameicon.png);
background-repeat:no-repeat;
}
::-webkit-input-placeholder {
color:#56828B;
padding-left:5px;
}
thanks
You actually do not need an image for that. Try the method below and the problem will never occur again:
#name {
font:'Montserrat', sans-serif;
font-weight:700;
font-size:24px;
border-radius: 2.5px;
border: 5px solid #999;
color:#56828B;
width:240px;
height:30px;
background-repeat:no-repeat;
position: relative;
padding-left: 50px; /* makes space for the icon */
}
#name:after {
content: '\f095';
font-family: fontAwesome;
position: absolute;
left: 8px;
top: 5px;
font-size: 20px;
color: #999
}
input:focus, input:active {
outline: 00;
}
#name input {
border: none!important;
width: 100%;
background-color:transparent;
color:#56828B;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<div id="name"> <input type="text" name="username" placeholder="Nombre"> </div>
Note: This is just an example, adjust to suit your needs.
See this tutorial here
Related
so i have this html code for radio buttons which works perfect on chrome but the css for radio buttons on firefox isnt working. What could be the problem?that is the code i have,is there anything im missing?
input[type='radio'] {
border-radius:50%;
outline:none;
}
input[type='radio']:before {
content:'';
display:block;
width:50%;
height:50%;
margin: 25% auto;
border-radius:50%;
}
input[type='radio']:checked:before {
background-color: #0496fd;
}
.bob-bound
{
padding-bottom:0.2px;
padding-right:10px;
margin:auto;
border: solid 0px blue;
height: 110px;
position:relative;
background-color: #f5f5f5;
}
.bob-bound-type-lable{
position: absolute;
margin-top:20px;
margin-left:30px;
border: solid 0px red;
width: 239px;
height: 18px;
font-family: HelveticaNeue-Light, Arial;
font-size: 16px;
color: #000000;
}
.bob-button {
width: 250px;
height: 46px;
vertical-align:right;
background-color: #ffffff ;
border: solid 1px #bfbfbf;
padding-left:5px;
font-family: ArialMT, Arial, sans-serif;
font-size: 15px;
margin-left:12px;
cursor:pointer;
}
.bob-button:hover {
background-color: #f3f8fd;
}
.bob-recommendation-button
{
position:absolute;
right:0px;
width: 292px;
top:49px;
border: solid 0px red;
}
.bob-Inbound{
position:absolute;
top:6px;
margin-left:8px;
width: 112px;
height: 17px;
font-family: ArialMT, Arial, sans-serif;
font-weight:bold;
font-size: 16px;
border: solid 0px red;
}
.bob-Outbound {
position:absolute;
top:6px;
margin-left:12px;
width: 239px;
height: 17px;
font-family: ArialMT, Arial, sans-serif;
font-weight:bold;
font-size: 16px;
border: solid 0px red;
margin-bottom:20px;
}
.bob-bound-type{
position: absolute;
width:437px;
margin-top:56px;
font-size: 14px;
margin-left:27px;
border: solid 0px red;
}
.bob-radio{
background:green;
width: 24px;
height: 24px;
background-color: #ffffff;
border: solid 1px #bbbbbb;
}
.bob-second-radio{
margin-left:120px;
}
<div class="bob-bound">
<div class="bob-bound-type-lable">
Contact Type
</div>
<div class="bob-bound-type">
<input type="radio" name="radiogroup" id="Inbound" class="bob-radio" value="Inbound" checked="checked"/>
<label for="Inbound" class="bob-Inbound">Inbound</label>
<input type="radio" name="radiogroup" id="Outbound" class="bob-radio bob-second-radio" value="Outbound"/>
<label for="Outbound" class="bob-Outbound">Outbound</label>
</div>
</div>
this is the way its supposed to display:
The general consensus is that styling radio buttons in Firefox with CSS is a fool's errand. But there are several workarounds that achieve the same effect. My personal favorite is to hide the actual radio button and instead use images to show if it is checked or unchecked.
There's a nice working example here:
Mozilla Firefox input radio button styling and default settings
Styling input elements (in particular radio buttons and checkboxes) can be unreliable across navigators. You're better off applying the styling to the label or a pseudo element.
I was practising some code and then this happened, The input text tag won't center. Margin: 0 auto; also doesn't seem to work either.
Here's the code I was working on.
HTML:
<input type="text" placeholder="Email">
CSS:
input {
outline: none;
border-radius: 5px;
border-style: none;
height: 45px;
width: 218px;
padding:0 16px;
font-family: Helvetica Neue;
font-size: 18px;
background-color: rgb(250,250,250);
margin:0 auto;
}
Can anyone help me out with this? and also a possible explanation?
input {
display:block;
margin:0 auto;
}
try using display:block in input element
snippet
div{
width:500px;
height:500px;
border:solid;
}
input {
display:block;
outline: none;
border-radius: 5px;
border-style: none;
height: 45px;
width: 218px;
padding:0 16px;
font-family: Helvetica Neue;
font-size: 18px;
background-color: rgb(250,250,250);
margin:0 auto;
border:solid;
}
<div>
<input type="text" placeholder="Email">
</div>
use this code:
input {
text-align:center;
}
click here for demo
<html>
<head>
<title>Page Title</title>
<style>
input {
outline: none;
border-radius: 5px;
border-style: none;
height: 45px;
width: 218px;
padding:0 16px;
font-family: Helvetica Neue;
font-size: 18px;
background-color: rgb(250,250,250);
position:absolute;
left:300px;
}
</style>
</head>
<body>
<input type="text" placeholder="Email">
</body>
</html>
*just increase the left px where you want it.
I am having this really weird issue where I cannot highlight my text in my form fields.
I cannot seem to figure out what the issue is, since everything but that seems to be working correctly.
I can't seem to understand where the problem lies - it doesn't work on Chrome or Safari.
{
position:relative;
width:100%;
margin-bottom:-20px;
}
.outerForm img {
width:800px;
text-align: center;
margin-left: auto;
margin-right: auto;
}
form {
display: table;
position:absolute;
top:0px;
left:0px;
right:0px;
margin-left: auto;
margin-right: auto;
color:black;
width:600px;;
height:300px;
margin-top: 100px;
}
.innerForm > input, .innerForm > label {
display: inline-block;
vertical-align: top;
margin-left: 5px;
margin-top: 25px;
margin-right: 5px;
}
.innerForm > label {
width:70px;
text-align: left;
}
#messageLabel {
}
input[type="text"] {
width:200px;
height:30px;
border:none;
outline:none;
box-shadow: none;
background-color:transparent;
border-bottom: 1px solid black;
}
textarea {
resize: vertical;
width:85%;
border:none;
outline:none;
box-shadow: none;
background-color: transparent;
padding-bottom: 18%;
border-bottom: 1px solid black;
margin-top: 20px;
}
textarea:focus {
border:none;
outline:none;
background-color: transparent;
box-shadow: none;
border-bottom: 1px solid red;
}
.innerForm > h4 {
margin-bottom:-10px;
text-transform:none;
font-family: 'Novecento sans wide';
}
input[type="text"]:focus, input[type="textarea"] {
border:none;
outline:none;
background-color:transparent;
box-shadow: none;
border-bottom:1px solid red;
}
#submitBtn {
background-color:transparent;
color:black;
font-weight:400;
border:none;
outline:none;
border:2px solid white;
padding:10px 20px 10px 20px;
font-size: 15px;
margin-top:15px;
transition: all 0.5s ease;
}
#submitBtn:hover {
background-color: #0080ff;
color:white;
}
<div class="outerForm">
<img id="cardImage" class="img-responsive" src="PlayingCardTemplate.png"/>
<form id="contactForm" action="Contact.php" method="POST">
<div class="innerForm">
<h4>Arshdeep Soni</h4>
<label id="nameLabel" for="name">Name:</label>
<input id="name" name="name" type="text"/>
<label id="phoneLabel" for="phone">Phone:</label>
<input id="phone" name="phone" type="text"/>
<label id="emailLabel" for="email">Email:</label>
<input id="email" name="email" type="text"/>
<label id="occasionLabel" for="occasion">Occasion:</label>
<input id="occasion" type="text" name="occasion"/>
<label id="messageLabel" for="message">Message:</label>
<textarea id="message" name="message" ></textarea>
<input type="submit" value="Submit" id="submitBtn" name="submit"/>
</div>
<p id="feedback"></p>
</form>
</div>
Look for ::selection inside the CSS Stylesheet.
An imported stylesheet or a theme might be include ::selection{background:transparent
for multiple reasons.
looking for that class and editing it can be solve the issue.
Also you can add color: in order to color the text inside your selection.
For mozilla use ::-moz-selection
What I would like is to have a column of labels, and to the right a column of text boxes approximately a few tabs apart and all aligned on (their respective) margins.
So far I have this. However when I resize the screen my text boxes move. How can I make them fixed?
This is the CSS:
#layout {
background-color: #f5fffa;
width: 600px;
padding: 20px;
border: 5px solid black;
margin: 0 auto;
color: black;
font-family: arial;
font-size: 15px;
font-weight: bold;
}
#zero {
text-align: center;
}
#one {
-moz-border-radius:7px;
-webkit-border-radius:7px;
border-radius:7px;
border:4px solid #18ab29;
border-width: 4px;
background-color: #44c767;
color:#ffffff;
padding-left: 9em;
padding-right: 9em;
}
.myform {
width:40px;
text-align: left;
position: absolute;
right: 800px;
height: 1.5em;
}
This is the HTML:
<div id="layout">
<h1 id="zero">Title</h1>
<form id="one">
<br>
<label>input one:</label>
<input type="text" class="myform" value="0" /><br><br>
<label>input two:</label>
<input type="text" class="myform" value="0" /></br>
</br>
</form>
</div>
EDIT:
I've figured it out:
Add this:
#one label {
display: inline-block;
width: 270px;
}
And take away:
position: absolute;
right: 800px;
from
.myform {
width:40px;
text-align: left;
position: absolute;
right: 800px;
height: 1.5em;
}
try to give the label a width:
label {
width: 100px;
}
#layout {
background-color: #f5fffa;
width: 600px;
padding: 20px;
border: 5px solid black;
margin: 0 auto;
color: black;
font-family: arial;
font-size: 15px;
font-weight: bold;
}
#zero {
text-align: center;
}
#one {
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;
border: 4px solid #18ab29;
border-width: 4px;
background-color: #44c767;
color: #ffffff;
height: 1.5em;
}
.myform {
text-align: left;
position: absolute;
right: 800px;
}
.leftCol {
float: left;
width: 50%
}
.rightCol {
float: right;
width: 50%
}
<div id="layout">
<h1 id="zero">Title</h1>
<form id="one">
<div class="leftCol">
<label>input one:</label>
<input type="text" value="0" />
</div>
<div class="rightCol">
<label>input two:</label>
<input type="text" value="0" />
</div>
</form>
</div>
I removed the position:absolute from the inputs (because in my screen they where way of, that's why you should use it if nothing else works) and then added a margin-right on the form labels. demo;
Relevant CSS
#one label{
margin-right:10px;
}
Update
I've added a fixed width to ammend for the possibility of labels with differente text lengths, here it is:
#one label{
display:inline-block;
margin-right:10px;
width:150px;
}
You should change width:150px to whatever you want it to be :)
Hope it helps!
I am trying to make facebook style comment post area but css is not working. What I'm trying to do. When increased the height of the textarea i want to submit button move down at the same time. When you write a few lines in the textarea, you'll see the submit button does not go move down at the same time.
HTML
<div class="stcommenttext">
<form method="post" action="">
<div class="comtextarea">
<div class="yorumyazalani">
<textarea name="comment" class="comment" maxlength="200" id="" rows="2" cols="50" value="Add your comment here...."></textarea>
</div>
<div class="comgonder">
<input type="submit" value="" id="" rel="" class="comment_button wallbutton" />
</div>
</div>
</form>
</div>
CSS
.comment {
border:1px solid #fff;
width:425px;
margin-left:3px;
margin-top:3px;
font-family:'lucida grande', tahoma, verdana, arial, sans-serif;
font-size:12px;
resize:none;
background-color:#f4f4f4;
}
.comtextarea {
float:left;
width:494px;
margin-left:3px;
height:auto;
border:1px solid #d8dbdf;
background-color:#fff;
}
.comtextarea textarea {
min-height:30px;
}
.yorumyazalani {
float:left;
width:auto;
height:auto;
}
.comgonder {
float:right;
width:auto;
height:auto;
bottom:0px;
margin-left:-5px;
}
.wallbutton {
float:left;
background-color: #fff;
min-width: 32px;
padding: 4px;
text-align: center;
background-position: left bottom;
background-repeat: repeat-x;
border: 1px solid #fff;
color: white !important;
cursor: pointer;
font-size: 12px;
font-weight: bold;
margin-top: 7px;
padding: 5px;
margin-left:5px;
text-decoration:none;
background-image:url(https://scontent-a-fra.xx.fbcdn.net/hphotos-frc1/t1.0-9/10291103_828742610487379_816788942451910142_n.jpg);
background-repeat:no-repeat;
background-position:left;
outline:none;
}
Here is the DEMO
You can fix this in a couple of simple steps:
Set position: relative; on .comtextarea. Now each child can relate to it's container.
Set position: absolute; on .comgonder. Now you can position this element in relation to .comtextarea.
Set bottom: 5px; and right: 5px; on .comgondor. It now follows the right corner of .comtextarea.
Codepen Fork
Try this CSS for the button:
.comgonder {
width: auto;
height: auto;
margin-bottom: 8px;
vertical-align: bottom;
display: inline-block;
}
And this for the textarea:
.yorumyazalani {
width: auto;
height: auto;
vertical-align: top;
display: inline-block;
}
This will make your 2 form elements inline (instead of floating them) and allow the button to be aligned based on the bottom of the textarea, instead of the top.
Updated Demo: http://codepen.io/anon/pen/CdxDI
.comtextarea
{
position: relative;
}
.comgonder
{
position: absolute;
right: 0px;
bottom: 0px;
}
You can change the right/bottom offsets for better spacing/alignment if you like