Что HTML/CSS Вы использовали бы для создания ввода текста с фоном?

Да, вы можете выполнить цикл и создать несколько элементов.

let yArray = [0, 35, 75, 115, 155, 195]
let textArray ["NO.", "Code", "Br", "Stat", "Line", "B"]

var numOfViewsNeeded = 5

func createPart() -> UIView {
    let part = UIView()
    part.translatesAutoresizingMaskIntoConstraints  = false
    part.layer.cornerRadius = 4
    part.layer.masksToBounds = true
    part.backgroundColor = .random()
    part.heightAnchor.constraint(equalToConstant: 300).isActive = true

    for index in 0...numOfViewNeeded-1 {
        let partLabel = UILabel(frame: CGRect(x:10, y: yArray[index], width: 300, height: 50))
        partLabel.text = "\(textArray[index])"
        partLabel.textColor = .white
        part.addSubview(partLabel)
    }

    part.layer.zPosition = -1
    return part
}

Это без использования tableView или stackView. Это работает для вас?

12
задан Darryl Hein 4 July 2013 в 16:39
поделиться

6 ответов

Я сделал бы это этот путь:

<style type="text/css">
div.custom {
    background:url(/images/input-bkg-w173.gif) no-repeat;
    padding:8px 5px 4px 5px;
}
div.custom input {
    background-color: #fff;
    border:none;
    font-size:10px;
}
</style>
<div class="custom"><input type="text" class="custom" size="12" /></div>

Просто необходимо скорректировать дополнительные значения, таким образом, все соответствует правильно. Это - в моих глазах - определенно лучшее решение с тех пор в любом другом случае, Вы работаете с целым полем ввода. И целое поле ввода - по определению - поле, где пользователи могут ввести текст.

Если можно полагаться на JavaScript, Вы могли бы перенести такие элементы отделения вокруг своих полей ввода программно.

Править: С jQuery Вы могли сделать это этот путь:

$( 'input.custom' ).wrap( '<div class="custom"></div>' );

CSS:

div.custom {
    background:url(/images/input-bkg-w173.gif) no-repeat;
    padding:8px 5px 4px 5px;
}
input.custom {
    background-color: #fff;
    border:none;
    font-size:10px;
}

И Ваш HTML:

<input class="custom" ... />
10
ответ дан 2 December 2019 в 20:41
поделиться

Вам не нужен элемент отделения, можно присвоить предпосылки к входу непосредственно.

Править: Вот рабочий код. Я протестировал его, но необходимо будет скорректировать его для потребностей. Насколько я могу сказать, все здесь необходимо.

input {
    background: #FFF url(test.png) no-repeat bottom right;
    width: 120px;
    height: 20px;
    line-height:20px;
    padding:0;
    text-indent:3px;
    margin:0;
    border: none;
    overflow:hidden;
}

Edit2: я не совсем уверен, почему я получаю downvoted, но этот метод должен работать, если Вам не нужно изображение, больше, чем сам входной элемент. В этом случае необходимо использовать дополнительный элемент отделения. Однако, если изображение является тем же размером как вход, нет никакой потребности в дополнительной разметке.

Edit3: хорошо, после того, как bobince указал на проблему, я становлюсь немного ближе. Это будет работой в IE6&7, и это близко в FF, но я все еще работаю над той частью.

input {
    background: #FFF url(test.png) no-repeat 0px 0px;
    background-attachment:fixed;
    width: 120px;
    height: 20px;
    line-height:20px;
    padding:0px;
    text-indent:3px;
    margin:0;
    border: none;
}
body>input {
    background-position:13px 16px;
}

Edit4: хорошо, я думаю, что получил его на этот раз, но это требует использования селектора CSS3, таким образом, это не проверит как CSS 2.1.

input { 
    background: #FFF url(test.png) no-repeat 0px 0px;
    background-attachment:fixed;
    width: 120px;
    height: 20px;
    line-height:20px;
    padding:0px;
    text-indent:3px;
    margin:0;
    border: none;
}
body>input { 
    background-position:13px 16px;
}
body>input:enabled { 
    background-position:9px 10px;
}

тело> вход будет предназначаться для всего за исключением IE6, тело> input:enabled будет предназначаться для любых элементов формы, которые не отключены для всех браузеров за исключением IE 6, 7, и 8. Однако, потому что: включенный селектор CSS3, он не проверяет как CSS2.1. Я не смог найти соответствующий селектор CSS2, который позволит мне разделять IE7 от других браузеров. Если не проверка (все же, пока блок проверки допустимости не переключается на CSS3) является проблемой для Вас, затем я думаю, что Ваша единственная опция является дополнительным элементом отделения.

4
ответ дан 2 December 2019 в 20:41
поделиться

Имейте Вас оцененное фоновое изображение использования как это:

<style type="text/css"> 
  input{ 
  background-color: #AAAAAA; 
  background-image: url('http://mysite.com/input.gif'); 
  border: 0px; 
  font-family: verdana; 
  font-size: 10px; 
  color: #0000FF; 
} 

1
ответ дан 2 December 2019 в 20:41
поделиться

Я сделал это несколько раз. Я имею фоновое изображение в отделении и использую CSS для расположения поля ввода соответственно.

Посмотрите на следующий сайт, который я создал, который использовал эту технику, и используйте код: http://www.ukoffer.com/ (Новостная рассылка правой стороны)

0
ответ дан 2 December 2019 в 20:41
поделиться

AFAIK, фоновая проблема прокрутки может быть решена или в Firefox и друзьях ИЛИ В Интернете Exploder; но не делают всех счастливыми сразу.

Я обычно говорил бы для моделирования входа непосредственно, но теперь, когда я думаю о нем, что пример отделения не звучит слишком плохим и должен заботиться о проблеме прокрутки фонового изображения.

В этом случае Вы установили отделение как position:relative и поместили вход в нем с надлежащим дополнением и шириной (или 100% шириной, если дополнение 0), прозрачный фон, и поместите изображение на отделение.

0
ответ дан 2 December 2019 в 20:41
поделиться

okoman получил корректный аспект CSS. Позвольте мне предложить использовать a <label> улучшить семантическую структуру разметки?

<label id="for-field-name" for="field-name">
    <span class="label-title">Field Name <em class="required">*</em></span>
    <input id="field-name" name="field-name" type="text" class="text-input" />
</label>

<style type="text/css">
    label, span.label-title { display: block; }
</style>

Мало того, что это более доступно, но и это обеспечивает многочисленные рычаги, которые можно использовать для любого типа управления DOM, проверки или определенного для поля моделирования в будущем.

Править: Если Вы не хотите заголовок маркировки, отображенный по некоторым причинам, можно дать ему класс 'доступности' и установить класс на display: none; в CSS. Это позволит программам для чтения с экрана понимать вход, но скрывать его от обычных пользователей.

0
ответ дан 2 December 2019 в 20:41
поделиться
Другие вопросы по тегам:

Похожие вопросы: