I have little experience in HTML so I apologize if this question has already been answered.
I want to send an email that has a few very long sections so I want them to be collapsible. I don't know much html/css but I was able to put something together that collapses the sections. However, whenever I convert it to inline css, I can no longer view the sections that are displayed.
I am open to other ideas on collapseable sections, however, I cannot use regular css, anything that falls under , any javascript, and anything in external documents.
Sample code below
<head>
<style>
body {
font-family: "Open Sans", Arial;
background: #CCC;
}
main {
background: #EEE;
width: auto;
margin: 20px auto;
padding: 10px 0;
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
}
h2 {
text-align: center;
}
p {
font-size: 16px;
}
input {
display: none;
visibility: hidden;
}
label {
display: block;
padding: 0.5em;
text-align: center;
border-bottom: 1px solid #CCC;
color: #444;
}
label:hover {
color: #000;
}
label::before {
font-family: Consolas, monaco, monospace;
font-weight: bold;
font-size: 15px;
content: "+";
vertical-align: text-top;
display: inline-block;
width: 20px;
height: 20px;
margin-right: 3px;
background: radial-gradient(ellipse at center, #CCC 50%, transparent 50%);
}
#expand0 {
height: 0px;
overflow: hidden;
transition: height 0.5s;
background: #FFF;
color: #000;
}
section {
padding: 0 20px;
}
#toggle0:checked~#expand0 {
height: 85px;
}
#toggle0:checked~label::before {
content: "-";
}
</style>
</head>
<main>
<input id="toggle0" type="checkbox" checked>
<label for="toggle0">Example</label>
<div id="expand0">
<section>
<p>Hello There</p>
<p>General Kenobi</p>
</section>
</div>
</main>
Inline of Example
<main style="background-color:#EEE;background-image:none;background-repeat:repeat;background-position:top left;background-attachment:scroll;width:auto;margin-top:20px;margin-bottom:20px;margin-right:auto;margin-left:auto;padding-top:10px;padding-bottom:10px;padding-right:0;padding-left:0;box-shadow:0 3px 5px rgba(0, 0, 0, 0.3);" >
<input id="toggle0" type="checkbox" checked style="display:none;visibility:hidden;" >
<label for="toggle0" style="display:block;padding-top:0.5em;padding-bottom:0.5em;padding-right:0.5em;padding-left:0.5em;text-align:center;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:#CCC;color:#444;" >Example</label>
<div id="expand0" style="height:0px;overflow:hidden;transition:height 0.5s;background-color:#FFF;background-image:none;background-repeat:repeat;background-position:top left;background-attachment:scroll;color:#000;" >
<section style="padding-top:0;padding-bottom:0;padding-right:20px;padding-left:20px;" >
<p style="font-size:16px;" >Hello There</p>
<p style="font-size:16px;" >General Kenobi</p>
</section>
</div>
</main>
Your example doesn't work because you can't specify inline styles for checked status.
You have to use css for that.
On another note: You say that you want to use this in an email, I don't think any email client would render your collapsible content.
So to answer your question: You have to use CSS (file or tag) for this type of behaviour, it's not possible with inline CSS alone. If you want to send this via email it would be better to dismiss these collapsible elements altogether and maybe reduce the amount of stuff you send out in an email.
Related
I have a widget that will display a listing of comments. The intent is...for the element to simply automatically expand to display the comment (text).
However, no matter what I try, either the element (itself) expands beyond the page...or the text flows beyond the bounds of the element(s).
I would like it to:
Adjust to parents width (if possible)
Auto-expand the height to fully-display the comment (if possible)
I've been trying:
Combinations of fixing inline-size, word-wrapping & overflow
But I cant seem to make it work
.commenting-context {
background-color: #fff;
border: 1px solid #B9B9B4;
display: none;
position: absolute;
margin-top: 20px;
min-width: 500px;
padding: 10px;
-webkit-box-shadow: 0 0 3px 1px #2e6da4;
-moz-box-shadow: 0 0 3px 1px #2e6da4;
box-shadow: 0 0 3px 1px #2e6da4;
}
.commenting-context section header {}
.commenting-context section header h5 {
color: #B4B4B3;
margin-top: 0px;
}
.commenting-context section header h5 .topic {
color: #000;
font-weight: 700;
}
.commenting-context .comment-gallery {
display: none;
}
.commenting-context .comment-gallery .comment {
margin-left: 10px;
}
.commenting-context .comment-gallery .comment:first-child {
margin-top: 15px;
}
.commenting-context .comment-gallery .comment header {
padding-bottom: 10px;
}
.commenting-context .comment-gallery .comment header .author {
margin-right: 5px;
font-weight: 700;
}
.commenting-context .comment-gallery .comment header .author.system {
color: #ccc;
}
.commenting-context .comment-gallery .comment header .title {
margin-right: 5px;
}
.commenting-context .comment-gallery .comment header .datetime {
color: #B4B4B3;
}
.commenting-context .comment-gallery .comment p {
font-size: 12px;
margin-top: 10px;
padding: 5px;
inline-size: 400px;
}
.commenting-context .working-status {
border: 1px solid #E7E2E2;
border-radius: 5px;
padding: 10px;
}
.commenting-context .working-status img {
height: 50px;
}
.commenting-context .working-status p {
color: #09347a;
font-size: 20px;
margin-top: 10px;
}
<!-- Comment Widget -->
<div class="commenting-context" data-context-id="0" data-context-fullname="">
<!-- Comment Header -->
<section>
<header class="clearfix">
<h5 class="pull-left">Comments for <span class="topic"></span></h5>
</header>
</section>
<!-- Comment Gallery -->
<section class="comment-gallery"></section>
<!-- Working Message -->
<div class="working-status">
<center>
<img src="/Content/Images/green-working-spinner.gif" />
<p>Working</p>
</center>
</div>
</div>
<!-- Comment -->
<article class="comment" data-id="0" data-commenting-id="0" data-user-id="0" data-is-system-comment="false">
<header class="clearfix">
<span class="datetime"></span>
<div class="pull-right">
<span class="author text-right"></span>
<span class="title text-right"></span>
</div>
</header>
<p></p>
<hr />
</article>
VISUAL:
So, often for UX purposes many third party data tables will apply a white-space: nowrap to a cells contents to apply an ellipsis with a hover tooltip to save on screen real estate in cases with long content strings (or sometimes they'll toggle the table-layout property on the table itself from auto to fixed for other scenarios. Either can effect content strings in various cases.
In this case a definition of white-space: nowrap is apparently applied accompanied by the line-height restriction you identified. So by overriding these properties to allow the wrapping then the cells content will in invoke the default overflow and word-break definitions to allow the user agent rendering it to perform like a paragraph would normally behave.
Glad you got your remedy!
Use a mix of max-width, and max-content.
Type into this snippet to see how it works.
$("input[type='text']").keyup(function ()
{
$("#msg")[0].innerHTML = $("input[type='text']")[0].value;
});
#limit {
width: 300px;
height: 100px;
border: 2px solid black;
padding: 2px;
}
#msg
{
width: max-content;
max-width: 98%;
border: 2px solid black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id = "limit">
<div id = "msg">
</div>
</div>
<input type = 'text'>
use position property in css
Position:relative;
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I trying to align this code
to get something like
how to write right syntax, to do right peace of code showing in picture, align to look like in picture?
Here's an updated Fiddle that gets you a little closer to what you need. So what did I do?
First, your HTML needs a lot of cleaning up. I did a small amount, but I would suggest that you spend some time going through it, indenting things correctly, and breaking it into logical sections.
For the right hand side, I broke each row into its own div to logically separate them. This makes it easier to style consistently.
The controls in each row were given fixed pixel widths to help with alignment. A bit of a hack, but in this case it works.
#starikovs suggests using Flexbox, which is something you should research further. I would also suggest you spend some time learning about how to structure your HTML cleanly first. The fiddle I linked to here is only a quick cleanup!
Edit
In the interests of keeping everything in one place, I've copied the code here:
HTML
<form id=fbid26588961 name=fbid26588961>
<div class="full-info_auction-operations">
<div class="full-info_auction-buy">
<div class="auction-value">
BuyNow
<span>5394 €</span>
</div>
<input disabled id=buynow1 onclick="newcmd('cmd.asp?op=buynow&carid=26588961');" type=button value="BuyNow">
</div>
<div class="full-info_auction-raise">
<div class="auction-value">
Current Price
<span>900 €</span>
</div>
<input type=button style="font-size:10px;" value="+100" onclick="pliusZZ(100);">
<input type=button style="font-size:10px;" value="+200" onclick="pliusZZ(200);">
<input type=button style="font-size:10px;" value="+500" onclick="pliusZZ(500);">
</div>
<div class="full-info_auction-confirm">
<div class="auction-value">
Your Bid
<div class="ctrl_row">
<input placeholder="1000 €" class="robot i12" id=sumbid26588961>
<input type=checkbox onclick="fbid26588961.pbtn.disabled=!this.checked;" >
<input disabled name=pbtn onclick="placebid26588961();" type=button class="confirm-button" value="Confirm" />
</div>
<label class="confirm-raise">
<input placeholder="for bot" class="robot confirm-modify i12" />
<input class="checkbox-controller" type="checkbox" name="country" onclick="fbid26588961.rbtn.disabled=!this.checked;if(!this.checked){disablerobot26588961();}" />
<input onclick="enablerobot26588961();" name=rbtn type=button disabled value="Enable robot">
<div class="checkbox"></div><span><div style="color:red">Robot disabled</div></span>
</label>
</div>
</div>
</div>
<div class="clear"></div>
</form>
CSS
/* ORIGINAL CSS */
input[type="button"] {background: #5267ff; border-radius: 3px; border: none; font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 11px; padding: 10px 14px; text-transform: uppercase;color:inherit;}
input[type="button"]:hover {background: #4758d2;}
.full-info_auction-operations {margin: 0 40px 0 85px; padding-top: 17px;}
.full-info_auction-operations input[type="button"] {display: inline-block; /*vertical-align: bottom;*/}
.full-info_auction-buy {max-width: 235px; display: inline-block; margin-right: 5px; padding: 5px 0 10px;}
.full-info_auction-operations.auction-value {font-family: 'Open Sans', sans-serif; font-size: 12px; color: #b1b1b1; display: inline-block; vertical-align: middle; text-align: left; line-height: 20px;margin: 0px 7px 0 0;}
.full-info_auction-operations.auction-value span {font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 16px; color: #000; display: block;}
.full-info_auction-raise {max-width: 265px; display: inline-block; border-left: 1px solid #e7e7e8; border-right: 1px solid #e7e7e8; padding: 5px 10px 10px;}
//.full-info_auction-raise input[type="button"] {padding: 10px 11px 10px 10px; background: #000;}
.full-info_auction-confirm {max-width: 215px; display: inline-block; margin-left: 5px; padding: 5px 0 10px;}
.full-info_auction-confirm .auction-value {margin-right: 7px;}
.full-info_auction-operations > div {
vertical-align: top;
}
/* NEW CSS BELOW */
.auction-value { float: left; font-size: 80%; color: #888; margin-right: 5px; }
.auction-value span { display: block; color: #000; }
.full-info_auction-buy input[type='button'] { color: #fff; }
.full-info_auction-raise input[type='button'] { background: #000; color: #fff; }
.robot { width: 50px; }
.ctrl_row { margin-bottom: 5px; }
.ctrl_row input[type='button'],
.confirm-raise input[type='button'] { width: 120px; }
.confirm-modify { color: #fff; }
You only have to add vertical-align: top; than it should work.
There you go :
.full-info_auction-operations > div {
vertical-align: top;
}
This should do the job. #Mario Kurzweil answer was the good one, don't know why it's downvoted.
In my opinion this Fiddle comes to your desired layout very close. My added CSS is placed at the end (start is marked with a /* */ ).
CSS I've added
.auction-value {
display: inline-block;
vertical-align: top;
color: #CCC;
padding: 0 5px;
}
.auction-value > span {
display: block;
font-weight: bold;
color: #000;
}
.full-info_auction-confirm {
max-width: 420px;
}
.auction-value > input {
display: inline-block;
}
.bot-container {
margin-top: 5px;
}
.bot-container > label > * {
display: inline-block;
}
::-webkit-input-placeholder {
color: black;
font-weight: bold;
}
:-moz-placeholder {
/* Firefox 18- */
color: black;
font-weight: bold;
}
::-moz-placeholder {
/* Firefox 19+ */
color: black;
font-weight: bold;
}
:-ms-input-placeholder {
color: black;
font-weight: bold;
}
The new way of doing that is to use flexbox. Here's an example:
HTML:
<div class="wrapper">
<div></div>
<div></div>
<div></div>
</div>
CSS:
.wrapper {
display: flex;
}
That's all the styles you need.
BTW, you can use Autoprefixer to get the right browser prefixes.
Flexbox is supported by all the major browsers: http://caniuse.com/#search=flexbox
I'm applying a box shadow to a form and thus all of it's inputs. For the submit button I have it as a specific class to which I'm trying too apply box-shadow: none, but it doesn't seem to be taking. Any idea why?
css:
body {
background: #b3b3b3;
font: 16px helvetica, arial, sans-serif;
}
.clear_both {
clear: both;
}
/* Heading */
#HeaderContainer {
background: #272727;
height: 120px;
box-shadow: 5px 5px 5px #7f7f7f;
}
#NavigationContainer {
position: relative;
float: right;
top: 90px;
margin: -5px 30px 0px 0px;
}
#NavigationContainer .current_page a {
color: #2e7de8;
text-shadow: 0px 0px 10px #2e7de8;
}
#NavigationContainer a:hover {
text-shadow: 0px 0px 15px #2e7de8;
}
#NavigationContainer li {
display: inline;
margin-left: 40px;
padding: 5px;
}
#NavigationContainer a {
text-decoration: none;
color: #FFF;
font: bold 20px helvetica, arial, sans-serif;
}
/* Content */
#MainContent {
width: 960px;
margin: 20px auto 40px auto;
}
#ContentRightColumn {
float: right;
width: 240px;
background: #272727;
padding: 20px 20px 40px 20px;
margin-top: 20px;
color: #fff;
border-radius: 15px;
box-shadow: 5px 5px 5px #7f7f7f;
}
#ContentRightColumn h1 {
font-size: 24px;
font-weight: bold;
}
#ContentRightColumn h3 {
font-size: 14px;
font-weight: bold;
}
#ContentRightColumn p {
font-size: 16px;
}
.news_item {
margin-top: 15px;
}
#ContentLeftColumn {
width: 640px;
padding: 20px;
}
#ContentLeftColumn h1 {
background: #272727;
color: #FFF;
max-width: 500px;
font-size: 24px;
font-weight: bold;
padding: 5px 10px;
border-radius: 15px;
box-shadow: 5px 5px 5px #7f7f7f;
position: relative;
right: 40px;
}
#ContentLeftColumn p {
text-indent: 1em;
}
.content_item {
margin-top: 20px;
}
.content_item p {
margin-top: 20px;
}
.content_item h2 {
font-weight: bold;
font-size: 24px;
color: #004dd4;
text-shadow: 3px 3px 4px #7f7f7f;
right: 20px;
}
/* Footer */
#FooterContainer {
background: #272727;
color: #fff;
}
#FooterContainer li {
display: inline;
}
#FooterContainer input, #FooterContainer textarea {
display: block;
width: 100%;
}
#ContactNavigationContainer {
float: right;
}
#FooterRightColumn {
width: 40%;
float: right;
margin: 20px 150px 20px 50px;
}
#FooterRightColumn form {
margin-top: 20px;
padding: 15px 20px;
}
#FooterRightColumn input, #FooterRightColumn textarea {
margin: 5px;
box-shadow: inset 5px 5px 8px black;
border: none;
font-size: 16px;
background: #b3b3b3;
padding: 5px 10px;
}
#FooterRightColumn textarea {
height: 160px;
}
#FooterRightColumn .current_contact_option {
margin-right: 20px;
padding-right: 20px;
border-right: 1px solid #FFF;
color: #2e7de8;
font-weight: bold;
text-shadow: 0px 0px 5px #2e7de8;
}
#FooterLeftColumn {
width: 40%;
padding: 40px 50px;
margin-left: 100px;
margin-top: 20px;
}
#FooterLeftColumn h1 {
font-weight: bold;
font-size: 24px;
position: relative;
right: 20px;
}
#FooterLeftColumn p {
padding: 20px 0px;
text-indent: 1em;
}
.submit_button {
position: relative;
width: 80px;
float: right;
}
html:
<html>
<head>
<title>B.workshop Home</title>
<link rel="stylesheet" type="text/css" href="../css/reset.css" />
<link rel="stylesheet" type="text/css" href="../css/style.css" />
</head>
<body>
<div id="HeaderContainer">
<img src="../images/logo.png"></img>
<div id="NavigationContainer">
<ul id="NavigationMenu">
<li class="current_page">Home</li>
<li>Technologies</li>
<li>Projects</li>
</ul>
</div> <!-- Close NavigationContainer -->
</div> <!-- Close HeaderContainer -->
<div id="MainContent">
<div id="ContentRightColumn">
<h1>News</h1>
<div class="news_item">
<h3>Mon. October 28th</h3>
<p>I need to build a portfolio, you need a website or application. Until I I get a few jobs under the belt I'm offering to work at the equivalent of a paid interns wage. Take advantage of this while you can!</p>
</div>
<div class="news_item">
<h3>Mon. October 26th</h3>
<p>The website is now live!</p>
</div>
</div> <!-- Close RightColumn -->
<div id="ContentLeftColumn">
<h1>Welcome to Brett's Workshop...</h1>
<div class="content_item">
<h2>So who are you?</h1>
<p>Hi, my name is Brett Sprouse and you've found my homepage! I'm a freelance web developer and programmer. Take a look around and if you think you may have a project I can help you with then head over to the contact page and share it with me.</p>
</div>
<div class="content_item">
<h2>Ok, and what can you do for me?</h2>
<p>Well, I can make you a webpage of course. Not just that, but setup hosting, provide server maintenance, website support, both per job or on a contractual basis. I can likely also take over support for existing websites in addition to the one I may make from scratch.</p>
<p>Everything is coded to the current html specifications including html5 and css3 (when applicable, many browsers still do not support the current html5/css3 specifications). I said I'm a programmer as well so this means I can work my way around javascript for front end/client side interactivity as well as server side scripting preferentially with python though I can also use php if it's for some reason forced upon me.</p>
</div>
<div class="content_item">
<h2>Is that it?</h2>
<p>What do you mean is that it!? Ok, ok, I can also develop desktop applications, tools and utilities, or scripts to help automate otherwise monotonous tasks; pretty much anything within a programmers domain. I know quite a few languages, libraries, frameworks, and can learn new ones rather quickly. Both windows and linux so if there's a task you believe can be solved with programming I can likely make that happen for you. Do keep in mind however that I am only one guy so there is a limit to the size of projects in which I can handle, but if you're not sure it doesn't hurt to ask. </p>
</div>
</div> <!-- Close LeftColumn -->
</div> <!-- Close MainConent -->
<div id="FooterContainer">
<div id="FooterRightColumn">
<div id="ContactNavigationContainer">
<ul id="ContactNavigation">
<li class="current_contact_option">Message Form</li>
<li>Live Chat</li>
</ul>
</div> <!-- Close ContactNavigationContainer -->
<form>
<input type="text" value="Name" name="name"></input>
<input type="text" value="Email" name="email"></input>
<textarea type="text" value= "Message" name="message"></textarea>
<div class="submit_button"><input type="submit" value="submit"></input></div>
</form>
</div> <!-- Close FooterRightColumn -->
<div id="FooterLeftColumn">
<h1>Contact</h1>
<p>So you've looked me over and decided to give me a shot. Well you won't be let down. Just use the form on your right to send me a shot description and anything else you feel is necessary and I'll get back to you shortly with a proposal. If you've happened to catch me when I'm on the computer and would like to talk directly feel free to use the new live chat system!</p>
</div> <!-- Close FooterLeftColumn -->
<div class="clear_both"></div>
</div> <!-- Close FooterContainer -->
</body>
</html>
This is just an issue regarding specificity - you just need to be more specific than the initial declaration.
No need for !important, just use the following:
#FooterRightColumn .submit_button input {
box-shadow: none;
}
jsFiddle example - it works.
Initially, you were added the shadow via #FooterRightColumn input. Simply be more specific by targeting #FooterRightColumn .submit_button input instead.
Here is the fiddle. I am trying to style the <select> and <input id='checkbox'> using CSS. I am currently using select {background: #4a4a4a} and it works, but I cannot get any other styles to work. The checkbox style doesn't work at all when using input[type='checkbox'] {background: #4a4a4a}
HTML:
<select>
<option>Hello</option>
<option>Hola</option>
<option>Bonjour</option>
</select>
<input type='checkbox'>
CSS:
body {
background: #252525;
}
select {
background: #4a4a4a;
border-radius: 0px;
}
input[type='checkbox'] {
background: #4a4a4a;
border-radius: 0px;
}
JS:
none
Edit
I have started a project where I am making my own not styleable form elements. For more info see this question.
Styling checkboxes
Styling checkboxes is tricky and inconsistent across browsers. Here is pure CSS approach. It takes advantage of that when label and input are connected with an id= , clicking on the label activates the input box itself. No JavaScript needed there.
HTML
<input type="checkbox" id="my-checkbox">
<label for="my-checkbox">Checkbox label text
<span class="checkbox"></span>
</label>
CSS
Hide checkbox, style the <span> as you like. I've used a CSS sprite here.
input[type="checkbox"] {
display: none;
}
input[type="checkbox"] + label .checkbox {
display: inline-block;
width: 22px;
height: 19px;
vertical-align: middle;
background: url('ui-sprite.png') left -90px no-repeat;
cursor: pointer;
}
input[type="checkbox"]:checked + label .checkbox {
background: url('ui-sprite.png') -30px -90px no-repeat;
}
Styling select inputs
I haven't found a simple working solution for this yet.
Here is an article about a hack that seems to be on a good way.
Given how every browser has its own rules and exceptions when it comes to input element styling, I tend to use things like http://uniformjs.com/ for consistent input styling. Slows things down on pages with thousands of input elements, but otherwise quite excellent.
You cannot style all form elements. Browsers tend to not allow you to style check-boxes and select boxes (As well as drop downs, radios, file uploads etc...). The general concept I have used before is to hide the actual element and use a replacement element such as a div to display to the user. That div can be styled to look and work the way you want. The tricky part and part most often missed is you have to actually change the state of the hidden form element when the user interacts with the mock element.
This is a JQuery Plugin that will provide the above functionality. This plugin was written with the intent that the user would style the elements according to what they need. Here is an example JsFiddle that demonstrates the plugin and exposes the CSS selectors with some basic styling. Basic code below...
HTML
<form>
<select>
<option>Hello</option>
<option>Hola</option>
<option>Bonjour</option>
</select>
<br/>
<input type='checkbox'>
</form>
JQuery
$(document).ready(function () {
$('body').styleMyForms();
});
CSS
body {
background: #252525;
}
.sf {
position: relative;
display: block;
float: left;
}
.sf-checkbox {
top: 6px;
margin-right: 5px;
height: 15px;
width: 15px;
background: #fff;
border: 1px solid #444;
cursor: pointer;
background: #4a4a4a;
border-radius: 0px;
}
.sf-select {
display: block;
width: 220px;
border: 1px solid #222;
background: #4a4a4a;
border-radius: 0px;
padding: 0px 10px;
text-decoration: none;
color: #333;
margin-bottom: 10px;
}
.sf-select-wrap {
position: relative;
clear: both;
}
.sf-select-ul {
background: #fff;
display: none;
list-style: none;
padding: 0;
margin: 0;
position: absolute;
border: 1px solid #888;
width: 240px;
padding: 0px;
top: 33px;
}
.sf-select-ul li {
position: relative;
cursor: pointer;
padding: 0px 10px;
color: #333;
}
.sf-select-ul li:hover {
background: #efefef;
}
.sf-select-ul li.selected {
background: #508196;
color: #fff;
}
.sf-select:focus, .sf-radio:focus, .sf-checkbox:focus, input[type="text"]:focus {
border-color: #222;
}
.sf-select:hover {
}
.sf-radio:hover, .sf-checkbox:hover, input[type="text"]:hover, input[type="text"]:focus, .sf-select:focus {
background: #efefef;
}
.sf-radio.selected, .sf-radio.selected:focus, .sf-radio.selected:hover, .sf-checkbox.selected, .sf-checkbox.selected:focus .sf-checkbox.selected:hover {
background: #9cb7c3;
}
.clear {
clear: both;
}
.buttonish {
display: block;
font-family:'Francois One', sans-serif;
font-weight: normal;
font-size: 2.8em;
color: #fff;
background: #9cb7c3;
padding: 10px 20px;
border-radius: 3px;
text-decoration: none;
width: 480px;
text-align: center;
margin-top: 50px;
text-shadow: 2px 2px 4px #508196;
box-shadow: 2px 2px 4px #222;
}
Think in boxes, how many boxes does a populated select seem to have when you look at it in a browser...
a lot, and they have lots of associated styles/scripts (background/colors,paddings, the functionality open/close etc.)
And actually you don't see anything of that in your code
So the code can only come from the browser
and browsers are different, all answers are correct, don't try to style it, let a JavaScript replace the elements and functionality.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 3 years ago.
The community is reviewing whether to reopen this question as of 3 days ago.
Improve this question
How do I visually place a button inside an input element as shown below?
The user should be able to interact with the input as normal. The text shouldn't go behind the button, even when it's long. Focus should work correctly. The form should be accessible and work correctly in screen readers. The whole component should be styleable with CSS, and should be able to easily resize to fit the space available.
How do I accomplish this with modern CSS?
The button isn't inside the input. Here:
input[type="text"] {
width: 200px;
height: 20px;
padding-right: 50px;
}
input[type="submit"] {
margin-left: -50px;
height: 20px;
width: 50px;
}
Example: http://jsfiddle.net/s5GVh/
Use a Flexbox, and put the border on the form.
The best way to do this now (2022) is with a flexbox.
Put the border on the containing element (in this case I've used the form, but you could use a div).
Use a flexbox layout to arrange the input and the button side by side. Allow the input to stretch to take up all available space.
Now hide the input by removing its border.
Run the snippet below to see what you get.
form {
/* This bit sets up the horizontal layout */
display:flex;
flex-direction:row;
/* This bit draws the box around it */
border:1px solid grey;
/* I've used padding so you can see the edges of the elements. */
padding:1px;
}
input {
/* Tell the input to use all the available space */
flex-grow:2;
/* And hide the input's outline, so the form looks like the outline */
border:none;
}
/* remove the input focus blue box, it will be in the wrong place. */
input:focus {
outline: none;
}
/* Add the focus effect to the form so it contains the button */
form:focus-within {
outline: 1px solid blue
}
button {
/* Just a little styling to make it pretty */
border:1px solid blue;
background:blue;
color:white;
}
<form>
<input />
<button>Go</button>
</form>
Why this is good
It will stretch to any width.
The button will always be just as big as it needs to be. It won't stretch if the screen is wide, or shrink if the screen is narrow.
The input text will not go behind the button.
Caveats and Browser Support
There's limited Flexbox support in IE9, so the button will not be on the right of the form. IE9 has not been supported by Microsoft for some years now, so I'm personally quite comfortable with this.
I've used minimal styling here. I've left in the padding to show the edges of things. You can obviously make this look however you want it to look with rounded corners, drop shadows, etc..
.flexContainer {
display: flex;
}
.inputField {
flex: 1;
}
<div class="flexContainer">
<input type="password" class="inputField">
<button type="submit"><img src="arrow.png" alt="Arrow Icon"></button>
</div>
I found a great code for you:
HTML
<form class="form-wrapper cf">
<input type="text" placeholder="Search here..." required>
<button type="submit">Search</button>
</form>
CSS
/*Clearing Floats*/
.cf:before, .cf:after {
content:"";
display:table;
}
.cf:after {
clear:both;
}
.cf {
zoom:1;
}
/* Form wrapper styling */
.form-wrapper {
width: 450px;
padding: 15px;
margin: 150px auto 50px auto;
background: #444;
background: rgba(0,0,0,.2);
border-radius: 10px;
box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.2);
}
/* Form text input */
.form-wrapper input {
width: 330px;
height: 20px;
padding: 10px 5px;
float: left;
font: bold 15px 'lucida sans', 'trebuchet MS', 'Tahoma';
border: 0;
background: #eee;
border-radius: 3px 0 0 3px;
}
.form-wrapper input:focus {
outline: 0;
background: #fff;
box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
}
.form-wrapper input::-webkit-input-placeholder {
color: #999;
font-weight: normal;
font-style: italic;
}
.form-wrapper input:-moz-placeholder {
color: #999;
font-weight: normal;
font-style: italic;
}
.form-wrapper input:-ms-input-placeholder {
color: #999;
font-weight: normal;
font-style: italic;
}
/* Form submit button */
.form-wrapper button {
overflow: visible;
position: relative;
float: right;
border: 0;
padding: 0;
cursor: pointer;
height: 40px;
width: 110px;
font: bold 15px/40px 'lucida sans', 'trebuchet MS', 'Tahoma';
color: #fff;
text-transform: uppercase;
background: #d83c3c;
border-radius: 0 3px 3px 0;
text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);
}
.form-wrapper button:hover {
background: #e54040;
}
.form-wrapper button:active,
.form-wrapper button:focus {
background: #c42f2f;
outline: 0;
}
.form-wrapper button:before { /* left arrow */
content: '';
position: absolute;
border-width: 8px 8px 8px 0;
border-style: solid solid solid none;
border-color: transparent #d83c3c transparent;
top: 12px;
left: -6px;
}
.form-wrapper button:hover:before {
border-right-color: #e54040;
}
.form-wrapper button:focus:before,
.form-wrapper button:active:before {
border-right-color: #c42f2f;
}
.form-wrapper button::-moz-focus-inner { /* remove extra button spacing for Mozilla Firefox */
border: 0;
padding: 0;
}
Demo: On fiddle
Source: Speckyboy
This is the cleanest way to do in bootstrap v3.
<div class="form-group">
<div class="input-group">
<input type="text" name="search" class="form-control" placeholder="Search">
<span><button type="submit" class="btn btn-primary"><i class="fa fa-search"></i></button></span>
</div>
</div>
This can be achieved using inline-block
JS fiddle here
<html>
<body class="body">
<div class="form">
<form class="email-form">
<input type="text" class="input">
Button
</form>
</div>
</body>
</html>
<style>
* {
box-sizing: border-box;
}
.body {
font-family: Arial, sans-serif;
font-size: 14px;
line-height: 20px;
color: #333;
}
.form {
display: block;
margin: 0 0 15px;
}
.email-form {
display: block;
margin-top: 20px;
margin-left: 20px;
}
.button {
height: 40px;
display: inline-block;
padding: 9px 15px;
background-color: grey;
color: white;
border: 0;
line-height: inherit;
text-decoration: none;
cursor: pointer;
}
.input {
display: inline-block;
width: 200px;
height: 40px;
margin-bottom: 0px;
padding: 9px 12px;
color: #333333;
vertical-align: middle;
background-color: #ffffff;
border: 1px solid #cccccc;
margin: 0;
line-height: 1.42857143;
}
</style>