I have a text input but the color is not right on top and left border, why is this, and how can I fix this?
http://jsfiddle.net/9ehBs/
HTML
<input type="text" class="searchbox" />
CSS
.searchbox
{
width: 200px;
height: 30px;
padding: 10px;
font-size: 28px;
font-weight: 900;
font-family: Ebrima;
color: rgb(54,54,54);
border-width: 13px;
border-color: rgb(46,94,115);
float: left;
margin-left: 10px;
margin-top: 10px;
}
You need border-style: solid. See your updated fiddle.
It would be much more efficient to use the shorthand, i.e. border: 13px solid rgb(46,94,115);
border: 13px solid rgb(46,94,115);
easier in one row ... hope it helps
.searchbox
{
width: 200px;
height: 30px;
padding: 10px;
font-size: 28px;
font-weight: 900;
font-family: Ebrima;
color: rgb(54,54,54);
border-width: 13px;
border-style: solid;/* add this to your css options: dotted | solid | dashed */
border-color: rgb(46,94,115);
float: left;
margin-left: 10px;
margin-top: 10px;
}
shorthand writing:
margin: 10px 0 0 10px; /*(top, right and left, bottom)*/
border:13px solid rgb(46,94,115);
...instead of
margin-left: 10px;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 0px;
border-width: 13px;
border-style: solid;/* add this to your css options: dotted | solid | dashed */
border-color: rgb(46,94,115);
Related
I have designed an input button in SCSS
.editButton /* button in edit window */
{
font-weight: bold;
font-size: 12px;
width: auto;
height: auto;
padding: 2px 5px 2px 5px;
border: 0.1em solid var(--edit-button-border-color);
color: var(--edit-button-text-color);
background: var(--edit-button-bg-color);
border-radius: 4px;
.fullWidth
{
width: 100% !important;
}
}
which is leading into css file
.editButton {
font-weight: bold;
font-size: 12px;
width: auto;
height: auto;
padding: 2px 5px 2px 5px;
border: 0.1em solid var(--edit-button-border-color);
color: var(--edit-button-text-color);
background: var(--edit-button-bg-color);
border-radius: 4px;
}
.editButton .fullWidth {
width: 100% !important;
}
My HTML
<input type = "button" id = "pmLettersEditFilterSend" class = "editButton fullWidth" value = "...">
But the fullWidth is not assigned to the element. Webdevelopers output:
<input type="button" id="pmLettersEditFilterSend" class="editButton fullWidth" value="Create Letter">
and the Filter styles:
element {
}
.editButton {
font-weight: bold;
font-size: 12px;
width: auto;
height: auto;
padding: 2px 5px 2px 5px;
border: 0.1em solid var(--edit-button-border-color);
color: var(--edit-button-text-color);
background: var(--edit-button-bg-color);
border-radius: 4px;
}
.pmLettersFilterFilterTitleDiv {
text-align: left;
font-weight: bold;
font-size: 12px;
color: var(--filter-accordeon-button-text-color);
}
#pmLettersEditTemplateDiv {
font-weight: bold;
font-size: 12px;
}
So what am I doing wrong?
It's because you are actually selecting a child element instead of the same element in your scss. It should be:
.editButton /* button in edit window */
{
font-weight: bold;
font-size: 12px;
width: auto;
height: auto;
padding: 2px 5px 2px 5px;
border: 0.1em solid var(--edit-button-border-color);
color: var(--edit-button-text-color);
background: var(--edit-button-bg-color);
border-radius: 4px;
&.fullWidth
{
width: 100% !important;
}
}
This is my current input field styling however for some reason which I am unable to see, they are not aligning properly next to each other.
Code:
<div class="labelInputField">Confirm Password</div><input type="text" class="inputField">
.labelInputField {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
padding: 8px;
width: 150px;
color: white;
background: rgba(0,0,0,1);
border: 2px solid #000;
display: inline-block;
height: 30px;
margin-top: 15px;
font-size: 16px;
}
.inputField {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
padding: 8px;
width: 180px;
color: white;
background: rgba(0,0,0,0.4);
border: 2px solid #000;
display: inline-block;
height: 30px;
font-size: 16px;
}
JSFiddle:
https://jsfiddle.net/0Lsake9j/
Any solutions?
Remove margin-top:15px and add line-height:30px; in .labelInputField style. That will make your div and input alignment proper.
.labelInputField {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
padding: 8px;
width: 150px;
color: white;
background: rgba(0,0,0,1);
border: 2px solid #000;
display: inline-block;
height: 30px;
line-height:30px;
font-size: 16px;
}
.inputField {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
padding: 8px;
width: 180px;
color: white;
background: rgba(0,0,0,0.4);
border: 2px solid #000;
display: inline-block;
height: 30px;
font-size: 16px;
}
<div class="labelInputField">Confirm Password</div><input type="text" class="inputField">
You can also test it here
Offload layout responsibility to a container and/or additional layers of markup.
Remove margin-top on the div
Use a <label for="[YOUR_INPUT_ID]"></label> and ensure your input has id="[YOUR_INPUT_ID]".
Add type="password" on your input, unless you have a specific reason not to.
Remove existing layouts styles from selectors that are styling the input and label (i.e. inline-block in this case.).
Apply your layout styling with an object that's sole purpose is to handle layout of your elements
.iHandleLayout {
display: flex;
/* rest of your layout styling etc. */
}
.labelInputField {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
padding: 8px;
min-width: 150px;
color: white;
background: rgba(0,0,0,1);
border: 2px solid #000;
font-size: 16px;
}
.inputField {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
padding: 8px;
width: 180px;
color: white;
background: rgba(0,0,0,0.4);
border: 2px solid #000;
font-size: 16px;
}
<div class="iHandleLayout">
<label class="labelInputField" for="password">Confirm Password</label>
<input type="password" class="inputField" id="password">
</div>
In the end, there are many ways to control the layout (display: inline-block, flex, table, etc), but the main principle is the separation of concerns with your styling and the markup structure as part of that separation.
I have a border around my h4 header :
h4 {
border-width: 2px;
border-radius: 25px;
border-color: gray;
width: 90%;
border-style: solid;
padding: 5px;
}
which renders as
I would like to indent the whole header (including the border) by 50px. Adding text-indent: 50px; indents just the text, not the border (and border-indent apparently does not exist)
What should be done so that the border is indented as well (or is indented, dragging the text within)?
use margin:
h4 {
border-width: 2px;
border-radius: 25px;
border-color: gray;
width: 90%;
border-style: solid;
padding: 5px;
margin-left: 50px; /* change this as you like */
}
margin will shift the whole element while padding will increase the space between the content and the border.
Look at this picture to understand the difference:
Use margin-left property to move the border also for h4 tag
Check out JSFiddle
CSS:
h4 {
border-width: 2px;
border-radius: 25px;
border-color: gray;
width: 90%;
border-style: solid;
padding: 5px;
margin-left:20px;
}
Add a wrapper:
h4 {
border-width: 2px;
border-radius: 25px;
border-color: gray;
width: 100%;
border-style: solid;
padding: 5px;
}
#wrapper {
width:90%;
padding-left:12px
}
<div id="wrapper">
<h4>ddd</h4>
</div>
you can try this one:
h4 {
border-width: 2px;
border-radius: 25px;
border-color: gray;
width: 90%;
border-style: solid;
padding:5px;
margin-left:50px;
}
DEMO HERE
Add padding-left: 50px and a margin-left: 50px to the h4
h4 {
border-width: 2px;
border-radius: 25px;
border-color: gray;
width: 90%;
border-style: solid;
padding: 5px 5px 5px 50px; /*top, right, bottom, left*/
margin-left: 50px;
}
The padding will affect the space between the border and the content, while the margin the space between the container and the nearest element
I am trying to disable/remove the border or the blue glow in the text box.
.user {
width: 300px;
height: 50px;
background-color: rgba(222,222,222,.0);
border: 2px solid rgba(222,222,222,0);
padding-left: 5px;
padding-right: 5px;
font-family: arial;
margin-bottom: -8px;
color: #ffffff;
}
.user::-webkit-input-placeholder {
color: #ffffff;
}
.password {
width: 300px;
height: 50px;
border: #e9e9e9;
background-color: rgba(222,222,222,.0);
border: 2px solid rgba(222,222,222,0);
padding-left: 5px;
padding-right: 5px;
font-family: arial;
margin-top: -8px;
}
.password::-webkit-input-placeholder {
color: #ffffff;
}
The form part:
<form method="post" class="login_form">
<div style="font-size: 20px; font-family: bebasregular; text-align: right; color: #ffffff;">Login</div>
<input type="text" name="user" class="user" id="user" placeholder="Username or Email"/>
<hr/>
<input type="password" name="password" class="password" placeholder="Password"/><br/>
<input type="submit" name="login_btn" class="login_btn" value="Login"/>
</form>
Now, what I'm trying to make is that the two text boxes in the form will become transparent, even they're in focus.
i tried this code below, but it doesn't work.
.user{
width: 300px;
height: 50px;
background-color: rgba(222,222,222,.0);
border: 2px solid rgba(222,222,222,0);
padding-left: 5px;
padding-right: 5px;
font-family: arial;
margin-bottom: -8px;
color: #ffffff;
}
.user:focus{
width: 300px;
height: 50px;
background-color: rgba(222,222,222,.0);
border: 2px solid rgba(222,222,222,0);
padding-left: 5px;
padding-right: 5px;
font-family: arial;
margin-bottom: -8px;
color: #ffffff;
}
.user::-webkit-input-placeholder {
color: #ffffff;
}
.password {
width: 300px;
height: 50px;
border: #e9e9e9;
background-color: rgba(222,222,222,.0);
border: 2px solid rgba(222,222,222,0);
padding-left: 5px;
padding-right: 5px;
font-family: arial;
margin-top: -8px;
}
.password:focus {
width: 300px;
height: 50px;
border: #e9e9e9;
background-color: rgba(222,222,222,.0);
border: 2px solid rgba(222,222,222,0);
padding-left: 5px;
padding-right: 5px;
font-family: arial;
margin-top: -8px;
}
.password::-webkit-input-placeholder {
color: #ffffff;
}
You can remove this by adding: outline: none; to the .user class (or any element that may receive the outline):
JS Fiddle
Sidenote:
I think its worth noting that on your hover states, you only need to specify the properties that change on that that state. For instance, if the element text color is white initially, and you want it to still be white on hovered state, you can omit that on the hover state.
The bluish glow is coming from the default outline styles. To remove it try:
input {
outline: none;
}
This will remove it from the user, password, and when the button is pressed.
JS Fiddle
use
input {
outline: none;
}
or change
border: 2px solid rgba(222,222,222,0);
to
border: 0px;
I need to make a box using css containing arc as shown in image . I want to do this using pure CSS. I am able to make arcs but not able to draw line. Here is my html and css code.
<style type="text/css">
.left_arc{
border-bottom: 1px solid #D0BFA6;
border-radius: 0 0 360px 0;
border-right: 1px solid #D0BFA6;
float: left;
height: 11px;
padding-top: 1px;
width: 11px;
}
.right_arc{
border-bottom: 1px solid #D0BFA6;
border-left: 1px solid #D0BFA6;
border-radius: 0 0 0 360px;
float: left;
height: 11px;
padding-top: 1px;
width: 11px;
}
.text_arc {
background: none repeat scroll 0 0 #FEEEEA;
border-top: 1px solid;
color: #A29061;
float: left;
font-family: times new roman;
font-size: 16px;
font-style: italic;
letter-spacing: 1px;
padding-left: 18px;
padding-top: 6px;
text-transform: uppercase;
width: 88px;
}
</style>
<div class="main_style">
<div class="left_arc"></div>
<div class="text_arc">Canada</div>
<div class="right_arc"></div>
</div>
Here is the output of my code.
LIVE DEMO
Simplify your HTML markup
and create crazy things using the CSS pseudo :before and :after selectors
HTML
<div class="main_style">
<div class="text">Canada</div>
</div>
<div class="main_style">
<div class="text">USA</div>
</div>
CSS:
.main_style {
background: none repeat scroll 0 0 #FEEEEA;
font: italic normal normal 16px/1em Times, "Times New Roman", serif;
text-transform: uppercase;
text-align:center;
letter-spacing: 1px;
color: #A29061;
position:relative;
overflow:hidden;
float: left;
}
.text{
border: 1px solid #D0BFA6;
padding:8px 20px 4px;
}
.main_style:before, .main_style:after{
content:'';
position:absolute;
top:-13px;
width:24px;
height:24px;
background:#fff;
border: 1px solid #D0BFA6;
border-radius: 42px;
}
.main_style:before{
left:-13px;
}
.main_style:after{
right:-13px;
}
You can just create a border with negative radius for only the top corners. See this post for more info...
Add extra Corner class to your left_arc and right_arc divs.
That will be shown in this JSBin.
.text_arc {
background: none repeat scroll 0 0 #FEEEEA;
border-top: 1px solid;
color: #A29061;
float: left;
font-family: times new roman;
font-size: 16px;
font-style: italic;
letter-spacing: 1px;
padding-left: 18px;
padding-top: 6px;
text-transform: uppercase;
width: 100px;
}
.corner {
position: absolute;
height: 10px;
width: 10px;
border: 1px solid #333;
background-color: #fff;
}
.left_arc {
top: -1px;
left: -1px;
border-radius: 0 0 100% 0;
border-width: 0 1px 1px 0;
}
.right_arc {
top: -1px;
left: 110px;
border-radius: 0 0 0 100%;
border-width: 0 0 1px 1px;
}
.main_style {
position: relative;
margin: 30px;
width: 119px;
height: 28px;
background: #ccc;
border: 1px solid #333;
}