I have this code <input type="submit" value="Register" />
How do I insert
<img src="http://i.imgur.com/m9KT9CQ.png"
onmouseover="this.src='http://i.imgur.com/T9hpI23'"
onmouseout="this.src='http://i.imgur.com/m9KT9CQ.png'"/>
onto this button? Thanks!
have a look at this link
http://screwdesk.com/how-to-create-html-rollover-image-button-using-css/
basically this css
a.btn {
display: block;
width: 294px;
height: 87px;
cusror: pointer;
background-image: url(rollover-image-button-1.png);
text-indent: -9999em;
}
a.btn:hover {
background-image: url(rollover-image-button-2.png);
}
Use this code:
<button type="submit">
<img src="http://i.imgur.com/m9KT9CQ.png" onmouseover="this.src='http://i.imgur.com/T9hpI23'" onmouseout="this.src='http://i.imgur.com/m9KT9CQ.png'"/>
</button>
Related
Is there any way to create image button in css file of mvc4? I am trying to do so but the image is not being displayed.
<button name="button" type="submit" class="button" style="width:48px; height:48px" >
<img src="~/Images/Setting.jpg"/></button>
Try:
<input name="button" type="submit" class="button" value="your_text" />
<style>
.button{
width:48px;
height:48px;
background: url(/Images/Setting.jpg);
background-size: 100% 100%;
}
</style>
You may use background-image
Demo
button {
background-image: url(http://lorempixel.com/100/100/sports);
background-size: cover;
color: white;
}
<button name="button" type="submit" class="button" style="width:48px; height:48px">button</button>
i just set the width and height in img tag too.
I am trying to do a image change when the mouse rolls over the image, but I have to use CSS not java script. I got the image to show up, but it shows up behind the first image, it doesn't replace it.
<img id="rollover" src="cat.jpg" width="250" height="188" alt="Cat">
#rollover:hover {background-image: url(dog.jpg);}
img {padding: 5px;}
Don't use the img tag.
Use the a itself:
a
{
display:inline-block;
width: 250px;
height: 188px;
background: red;
}
a:hover
{
background: blue;
}
Set the first image via CSS also.
<div id="rollover" width="250" height="188"></div>
#rollover {
background-image: url(cat.jpg);
}
#rollover:hover {
background-image: url(dog.jpg);
}
You dont need anotehr element of A...
#rollover { background-image: url(cat.jpg);
width: 250px; height: 188px;
display: block;
}
#rollover:hover { background-image: url(dog.jpg); }
You could have two images and switch display property example
#dog{
display: none;
}
#cambio:hover > #cat{
display: none;
}
#cambio:hover > #dog{
display:block;
}
<a href="#" id="cambio">
<input type="button" id="dog" value="Perro" />
<input type="button" id="cat" value="Gato" />
</a>
I am designing login page. Here I am adding icons for username and password, when I add icons along with icons someother icons also adding how to resolve this . Here is my code.
<div class="left-inner-addon ">
<i class="icon-user"></i>
<input type="text" placeholder="User Name" name='j_username' >
</div></div>
and css is as follow,
<style type="text/css">
.left-inner-addon {
position: relative;
}
.left-inner-addon input {
padding-left: 30px;
}
.left-inner-addon i {
position: absolute;
padding: 10px 12px;
pointer-events: none;
}
</style>
and I dont have reputation to post pic of the login form .
I got an idea of what you are facing, according to the current standards of Twitter Bootstrap, you just have to use the following code to achieve what you want. I had tested it on live server and it is working fine.
Just replace your HTML Code by the following code :
<div class="input-group">
<span class="input-group-addon glyphicon glyphicon-user"></span>
<input type="text" class="form-control" placeholder="User Name" name='j_username'>
</div>
I hope this help.
I am writing a new answer for what you asked. Follow this code. This will definitely help.
Here's the HTML for the text box:
<div class="input-group">
<input type="text" placeholder="User Name" name='j_username' id="funkystyling" />
</div>
Here's the CSS for the image on the left:
#funkystyling {
background: white url(/path to icon.png) left no-repeat;
padding-left: 17px;
}
And here's the CSS for the image on the right:
#funkystyling {
background: white url(/path to icon.png) right no-repeat;
padding-right: 17px;
}
With Boostrap 2.3.2
HTML
<div class="left-inner-addon ">
<i class="icon-user"></i>
<input type="text" class="form-control" placeholder="User Name" name='j_username' >
</div>
CSS
.left-inner-addon {
position: relative;
}
.left-inner-addon input {
padding-left:20px;
height:20px;
}
.left-inner-addon i {
position: absolute;
margin:7px 5px;
}
JSFFIDLE
In the example below:
I want the textbox to fill all available space. The problem is the dropdown width cannot be fixed, since its elements are not static. I would like to solve this with just css (no javascript if possible).
I have tried the solutions proposed to similar questions without any luck :(
Here is the fiddle: http://jsfiddle.net/ruben_diaz/cAHb8/
Here is the html:
<div id="form_wrapper">
<form accept-charset="UTF-8" action="/some_action" method="post">
<span class="category_dropdown_container">
<select class="chosen chzn-done" name="question[category_id]" id="selQJK">
<option value="1">General</option>
<option value="2">Fruits</option>
<option value="3">Ice Creams</option>
<option value="4">Candy</option>
</select>
</span>
<span class="resizable_text_box">
<input id="question_text_box" name="question[what]" placeholder="Write a query..." type="text" />
</span>
<input name="commit" type="submit" value="Ask!" />
</form>
</div>
And here the css:
#form_wrapper {
border: 1px solid blue;
width: 600px;
padding: 5px;
}
form {
display: inline-block;
width: 100%;
}
.category_dropdown_container {
}
.resizable_text_box {
border: 1px solid red;
}
input[type="text"] {
}
input[type="submit"] {
background-color: lightblue;
width: 80px;
float: right;
}
Updated demo (tested fine in IE7/8/9/10, Firefox, Chrome, Safari)
Float the left and right elements.
In the HTML source code, put both of the floated elements first (this is the most important part).
Give the middle element overflow: hidden; and an implict width of 100%.
Give the text box in the middle element a width of 100%.
.category_dropdown_container {
float: left;
}
input[type="submit"] {
float: right;
...
}
.resizable_text_box {
padding: 0 15px 0 10px;
overflow: hidden;
}
.resizable_text_box input {
width: 100%;
}
<div class="category_dropdown_container">
<select class="chosen chzn-done" name="question[category_id]" id="selQJK">
...
</select>
</div>
<input name="commit" type="submit" value="Ask!" />
<div class="resizable_text_box">
<input id="question_text_box" name="question[what]"
placeholder="Write a query..." type="text" />
</div>
The relatively recent 'flex' display css property solves this problem for you:
All you need to do is change form's display to inline-flex, give .resizable_text_box flex-grow: 100; and give #question_text_box width: 100%
Full example from the OP:
<style>
#form_wrapper {
border: 1px solid blue;
width: 600px;
padding: 5px;
}
form {
display: inline-flex;
width: 100%;
}
.category_dropdown_container {
}
.resizable_text_box {
border: 1px solid red;
flex-grow: 100;
}
#question_text_box {
width: 100%
}
input[type="text"] {
}
input[type="submit"] {
background-color: lightblue;
width: 80px;
float: right;
}
</style>
<div id="form_wrapper">
<form accept-charset="UTF-8" action="/some_action" method="post">
<span class="category_dropdown_container">
<select class="chosen chzn-done" name="question[category_id]" id="selQJK">
<option value="1">Options</option>
</select>
</span>
<span class="resizable_text_box">
<input id="question_text_box" name="question[what]" placeholder="Write a query..." type="text" />
</span>
<input name="commit" type="submit" value="Ask!" />
</form>
</div>
Flex-box lets you do what you wanted to do with css for 15 years - its finally here! More info: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Change some of those <span> elements to <div> elements; then float:left the division around your dropdown; then give the one of the right an overflow:hidden and the input element inside it a width:100%;.
Here's an example. Here it is again with a bigger drop down.
Except that screws up the submit button. So give the #form_wrapper non-static positioning (position:relative) and position the submit button absolutely. See this fiddle and this one.
I want to center the div box im making here but i dont want to center the text in the box and i cant seem to find how to do this. For now what i have is this:
.box {
text-align: left;
background-color:#3F48CC;
color:white;
font-weight:bold;
margin:120px auto;
height:150px;
display: inline-block;
width: 200px;
}
and
<div class=box>
Login
<form method ="post" action="addMember.php">
<label for="name">Username:</label>
<input name="name"/>
<label for="password">Password:</label>
<input name="password"/>
<p>
<input name="submit" type="Submit" value="Register"/>
<input name="reset" type="reset" value="Clear Form">
</form>
</div>
Thanks in advance!
Remove display: inline-block; & text-align:center
inline-block is not necessary when you are defining the width/height for the div.
By default div is a block element.
.box {
background-color:#3F48CC;
color:white;
font-weight:bold;
margin:120px auto;
height:150px;
width: 200px;
}
DEMO
Use dead centre...
.box {
text-align: left;
background-color:#3F48CC;
color:white;
font-weight:bold;
height:150px;
width: 200px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -75px;
}
Note: Negative margins are exactly half the height and width, which pull the element back into perfect center. Only works with elements of a fixed height/width.
More info:
CSS Tricks Example
jsFiddle Demo
jsFiddle DEMO
Alternate jsFiddle DEMO with Centered Form and also this CSS3 Version.
The key to making the form look correct is to use padding, which is part of box model. Doing so allows you to fill in the sides, and keeps the text left-hand aligned.
HTML
<div class=box>Login
<form method="post" action="addMember.php">
<label for="name">Username:</label>
<input name="name" />
<label for="password">Password:</label>
<input name="password" />
<div class="buttons">
<input name="submit" type="Submit" value="Register" />
<input name="reset" type="reset" value="Clear Form" />
</div>
</form>
</div>
CSS:
.box {
background-color:#3F48CC;
color:white;
font-weight:bold;
height:150px;
width: 150px;
padding: 10px;
}
.buttons{
padding-top: 20px;
}
Screenshot: